博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Css基础2
阅读量:6948 次
发布时间:2019-06-27

本文共 3486 字,大约阅读时间需要 11 分钟。

1.css选择符

  选择符又称为选择器,定义了将影响文档中的哪些部分。

  -1.元素选择符

    通配符:*{}

      下面的例子(test.css) 匹配文档中所有的标签

*{
background-color: blue;}

      一般情况下,我们会在html初始化的时候使用通配符,例子如下,将上和左边距都设为0

*{
padding: 0; margin: 0; }

    类选择敷:.类名称{}

      下面的例子,将p标签的内容变为绿色

      

1 index.html代码如下 2  3  4  5     
6 7
8 9 10

haha

11 hehe12 13 14 15 css.css代码如下16 *{17 padding: 0;18 margin: 0;19 }20 21 .hp{22 color:green;23 }

    id选择符:#id名称{}

      下面的例子,将span标签内容变为紫色

index.html代码如下    

haha

hehecss.css代码如下*{
padding: 0; margin: 0; }.hp{
color:green;}#hs{
color: purple;}

    类型选择符(标签选择符):标签{}

      下面的例子将li标签内容变为红色

index.html代码如下    

haha

hehe
  • 我是列表
  • 我是列表
  • 我是列表
  • 我是列表
css.css代码如下*{
padding: 0; margin: 0; }.hp{
color:green;}#hs{
color: purple;}li{
color: red;}

 

  -2.关系选择符

    - 子元素选择器:父亲>儿子

    - 兄弟选择器:你自己~你的兄弟

      1.本身不起作用

      2.之前的元素不起作用

      例子:下面的代码只有第二个和第三个h3标签会变色

inde.html代码如下    

这是一个标题

这是一个文字段落

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个文字段落

css.css代码如下p~h3{
color: brown;}

    - 相邻选择器:E+F

      下面的例子中,第三行和最后一行变色

index.html代码如下    

这是一个标题

这是一个文字段落

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个文字段落

css.css代码如下p+p{
color: red;}

    - 包含选择器:EF

      下面的例子,所有的ul,li标签内容全部变成红色

inde.html代码如下    
  • 列表项目
    • 列表项目
    • 列表项目
    • 列表项目
    • 列表项目
  • 列表项目
  • 列表项目
css.css代码如下ul li{
color: red;}

  -3.属性选择符

    1.属性

    2.写法:

        1)当前元素[属性]{}

          例子:haha变色而hehe不变色

    
haha hehe

        2)当前元素[属性=“属性值”]{}

          例子,第一个百度标签会变为红色

    
百度一下 百度一下 百度一下 百度一下

  -4.伪类选择符

    - 定义:它允许给html标签的某种状态设置样式

      1)元素:link:设置超链接a在未被访问前的样式

      2)元素:visited:设置超链接a在其链接地址已被访问过时的样式

      3)元素:hover:设置元素在其鼠标悬停时的样式

      4)元素:active:设置元素在被用户激活(在鼠标点击与释放之间的事件)时的样式

    - 注意:

      1)a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后

      2)可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te(active),即使用love,hate两个单词来记忆

      例子:

    

  -5.伪对象选择符

    -1.元素:before{}:设置在对象前发生的内容,用来和content属性一起使用,并且必须定义content属性。

    -2.元素:after{}:设置在对象后发生的内容。用来和content属性一起使用,并且必须定义content属性。

选择器的优先级:!important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符

注:!important要写在属性值后面,分号的前面。

  例:

    p{

      color: red !important;

    }

    

优先级

 

2.css的背景,颜色,边框

  1.背景:纯色,图片

    background-attchment:背景图像是否固定或者随着页面的其余部分滚动。

    background-color:设置元素的背景颜色

    background-image:把图片设置为背景

    background-position:设置背景图片的起始位置

    background-repeat:背景图片是否以及如何重复

  

    

哈哈

哈哈

哈哈

  2.边框

    border-width:边框宽度

    border-style:边框样式

    border-color:边框颜色

    border-radius:设置圆角边框

    box-shadow:设置对角阴影

    boder-image:边框背景图片

  3.颜色

    1.颜色值

      1.color name(用颜色名称表示):color:red;

      2.HEX(十六进制数值表示法):color:#ff0000;

      3.RGB(三原色:红绿蓝)

      4.RGBA(三原色+不透明度[0.0-1.0])

      5.透明色:color:transparent

    2.属性

      opacity:<number>    设置对象的不透明度

      1:不透明

      0:完全透明

    例子:

    

 

转载于:https://www.cnblogs.com/yangfanasp/p/6925930.html

你可能感兴趣的文章
史上最失败系统!微软正式终止对Vista支持
查看>>
360与Bing合作上线英文搜索
查看>>
保持新投资技术先进性和保护既有投资的完美均衡 —— 成都地铁4号线二期PIS车地无线通信...
查看>>
《Android和PHP开发最佳实践》一第3章 PHP开发准备
查看>>
黑客的克星或叫“白客”
查看>>
假如在1996年,微软、IBM、苹果你会投资谁?
查看>>
国网四川电力应用大数据服务经济社会发展
查看>>
杭州云栖大会10月起航,这里有一份最全的大会剧透
查看>>
雅虎卖身不影响梅耶尔赚钱 她总薪酬2.2亿美元
查看>>
Win10周年升级新增52000个emoji表情
查看>>
大数据降噪方法论
查看>>
衰退的爱立信,进击的华为
查看>>
索尼工厂被迫停止生产,日本地震带来的冲击可能不止于此
查看>>
独角兽复活:Twilio上市预示IPO市场起死回生
查看>>
数据中心运维管理经验39条
查看>>
安防的未来五年 如何把握机遇深耕市场?
查看>>
如此逼真的高清图像居然是端到端网络生成的?GANs 自叹不如 | ICCV 2017
查看>>
Wework的线上社交,能否支撑其169亿估值?
查看>>
印度SaaS创企Whatfix获370万美元A轮融资
查看>>
征信考量社交化和大数据化
查看>>