CSS第二天

一、选择器

层级选择器

书写规则:用空格隔开每一层选择器。

优势:只要选择器嵌套关系与html结构的嵌套关系正确,无论有多少层嵌套,都可以被选中。

尽可能的补全祖先选择器,来时范围精确。

交集选择器

书写规则:每选择器之间连续书写,没有任何空格。

同时标签名只可以出现一次,且必须出现在最前面

并集选择器

书写规则:每个选择器之间通过逗号隔开,且每组选择器在一行。

只要看到逗号,一定是并集选择器。

二.css代码规范

<!-- 1.四个空格为一个缩进 -->

<!-- 2.选择器与大括号之间有一个空格 -->

<!-- 3.属性名与冒号之间没有空格,冒号与之后的属性值有空格 -->

<!-- 4.一个属性独占一行,每个属性写完后面都要有分号 -->

<!-- 5.并集选择器,每组选择器独占一行 -->

<!-- 6.> + ~ 前后都有一个空格 -->

<!-- 7.属性值或者文本内容使用的引号选择双引号 -->

<!-- 8.属性值之中有逗号,逗号后面要有空格 -->

三.继承性

如果给父元素设置了一些样式,他的后代元素可以继承这些样式

只有文字属性可以被继承,盒子属性不能被继承

文字属性:color、font-系列、line-系列、text-系列。

盒子属性:background-系列、width、height、border-系列、浮动、定位等。

四.层叠性

         多组选择器的样式可以作用在同一个元素上。

         通过同样的选择器设置相同的样式,根据我们设置样式的距离,决定渲染的最终结果,后面的覆盖前面的。

         层叠性:针对同一个元素标签,当设置了不同的选择器时,权重高的层叠掉权重低的样式。 

五.权重

                注意:比较权重的时候,一定要让选择器作用到元素上。

       <!-- 比较权重 -->

1.都作用到了目标元素,权重不同,选择权重较大的

2.都作用到了目标元素,权重相同,根据有就近原则 

3.一个作用到了目标元素,一个没有作用到目标元素,用作用到目标元素的 

4.都没有作用到目标元素,但是作用了相同的父元素,比较权重,用权重大的

5.都没有作用到目标元素,但是作用了相同的父元素,权重相同,根据就近原则

6.都没有作用到目标元素,且作用不同父元素,考虑继承,根据就近原则 

7.并集选择器,拆开来看,一组一组的确认权重。

        <!-- 权重排序 -->

 !important>行内式>id>类|伪类|属性>标签|伪元素>通配符,继承等

CSS第二天

 

        !important

    <!-- !important 提高优先级 -->

    <!-- 一次只可以影响一条样式 -->

    <!-- 只有样式可以用,选择器不能使用 -->

        颜色表示法

                英文法,rgb法 color:rgb(255,255,255);,十六进制法color:#ffffff;

六.文字和文本样式

        

<!-- 文字 -->

    <!-- 设置颜色 -->
    <!-- color -->

    <!-- font系列 -->

    <!-- 设置文字字号 -->
    <!-- font-size -->
    <!-- 可以直接使用英语单词但是单词一般很少使用  如 :large,small,larger,medium,smaller
        一般直接使用数字设置字体的大小 单位(px em rem) -->
    <!-- em单位 -->
    <!-- em作为单位时在设置的文字字号时,em是相对于父元素的字号大小而言 -->
    <!--            在设置非文字的样式作为单位是,相对的自身的字号大小 -->
    <!-- rem单位 -->
    <!-- rem在作为单位是是相对于根元素 html的字号大小而言的 -->

    <!-- 设置文字的字体 -->
    <!-- font-farmily -->
    <!-- 一般会设置多个字体,为了防止有的电脑没有某种字体,导致无法显示 -->
    <!-- 多个字体设置时,使用逗号隔开,同时对英文字体的设置放在最前面 -->

    <!-- 设置文字的风格 -->
    <!-- font-style -->
    <!-- 属性值可以为 italic 倾斜  normal 正常 -->

    <!-- 设置字体的粗细 -->
    <!-- font-weight -->
    <!-- 属性值可以设置为100-900之间的整数,也可以设置为英文单词例如: -->
    <!-- bold 粗 bolder 更粗 normal 正常 lighter 细 -->

    <!-- 设置英文字符大小写 -->
    <!-- font-variant -->
    <!-- 属性值 small-caps  设置后英文字符就会变大写-->

    <!-- font设置可以直接完成 -->
    <!-- font是一个复合的属性,可以统一设置font属性  -->
    <!-- 顺序为:font-style   font-variant  font-weight font-size/line-height font-family -->
    <!--         字体样式    字母大小写(可选)     字体粗细     字体大小   行高        字体 -->
    <!-- 例 font: italic  normal 10px/30px 楷体,宋体-->
    <!-- 注意:字体大小与行高之间有一个斜杠来分开 -->
<!-- 设置文本 -->
    <!-- text系列 -->
    <!-- text-decoration  文本修饰-->
    <!-- text-decoration:none; 清除文本样式 -->
    <!-- text-decoration:underline; 设置下划线 -->
    <!-- text-decoration:overline; 设置上划线 -->

    <!-- text-indent 缩进 -->
    <!-- 一般使用em作为单位 -->
    <!-- em作文不修饰文字的单位是,会对于本本身字号来确定大小,因此不管字体怎么变,只要设置2em
        文本始终会缩进2字符 -->
    <!-- 也可以使用px作为单位 -->

    <!-- 设置文本对齐方式 -->
    <!-- text-align 设置文本对齐方式 -->
    <!-- text-align:left;  左对齐-->
    <!-- text-align:right; 右对齐-->
    <!-- text-align: center; 居中对齐-->
    <!-- text-align: justify; 左右对齐(分散对齐)-->

    <!-- 其他文本修饰 -->

    <!-- 设置垂直对齐方式 -->
    <!-- vertical-align -->
    <!-- 设置的是同一行内的元素的垂直对齐方式 -->
    <!-- 属性值 -->
    <!-- vertical-align: bottom; 在底部对齐 -->
    <!-- vertical-align: top; 在顶部对齐-->
    <!-- vertical-align: middle; 在中间对齐 -->
    <!-- 字间距 -->
    <!-- letter-sapcing:2px; -->
    <!-- 设置字间距,是对英文和汉字都有效果 -->

    <!-- 词间距 -->
    <!-- word-spacing:2px; -->
    <!-- 设置词间距,对于英文诱效果,但是当文字之间存在空格时,同样也会对文字起效果 -->

    <!-- 空白处理 -->
    <!-- white-space  指定行内的空白元素怎么处理-->
    <!-- white-space:normal; 默认值,会进行空白折叠,进行自动换行--> 
    <!-- white-space:nowrap; 空白折叠,不会自动换行-->
    <!-- white-space:pre;保留原格式,不会自动换行 -->
    <!-- white-space:pre-line; 空白折叠,自动换行-->
    <!-- white-space:pre-wrap; 空白不折叠,自动换行--> 

上一篇:CSS样式创建(外部样式 内部样式 内联样式)


下一篇:Days31 CSS