第三章 使用CSS技术美化

1、CSS样式中的选择器严格区分大小写,属性和值不区分大小写。

2、引入css样式表

      (1)行内式(内联样式)通过标记的style属性来设置元素的样式

                <标记名 style="   "> 内容</标记名>

       (2)内嵌式:写在<head>头部标记中,并且用<style>标记定义。

                 <style  type="text/css">   选择器 {}</style>

                只对其所在的html页面有效。

       (3)链入式:将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中,通过<link/>标记将外部样式表文件链接到文档中。<link  href="css文件的路径"  type="text/css"  rel="stylesheet(样式表文件)"/>

3、css基础选择器

       (1)标记选择器:优点 能快速为页面中同类型的标记统一样式。

       (2)类选择器:优势可以为元素对象定义单独或相同的样式。

               类名的第一个字符不能使用数字,并且严格区分大小写,一般采用小写的英文字符。

       (3)id选择器:用”#“进行标识,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

               id选择器不支持像类选择器那样定义多个值。

4、*{}对所有html标记都生效。

5、font-weight:字体粗细        normal:默认值           bold:粗体             bolder:更粗          lighter:更细

      font-variant:变体               normal:默认值        small-caps:所有的小写均会转换为大写字母。

      font-style:字体风格         normal:                 italic:倾斜             oblique:倾斜

6、font:综合设置字体样式

      选择器{font:   font-style  font-variant    font-weight   font-size/line-height   font-family;}

7、css文本外观属性

       color:文本颜色

       letter-spacing:字间距

       word-spacing:单词距

      line-height:行间距

      text-transform:文本转换       capitalize:首字母大写      uppercase:全部字符转换大写     lowercase:转换为小写

      text-decoration:文本装饰     none:没有装饰   underline:下画线    overline:上画线     line-through:删除线

8、text-align:水平对齐方式

      left:左对齐(默认)    right:右对齐      center:居中对齐

9、text-indent:首行缩进(使用em作为设置单元)

      仅适用于块级元素,对行内元素无效。

10、white-space:空白符处理

       normal:默认,文本中的空格,空行无效,满行(到达区域边界)后自动换行

      pre:预格式化,按文档的书写格式保留空格,空行原样显示。

      nowrap:空格空行无效,强制文本不能换行,除非遇到换行标记<br/>.内容超出元素的边界也不换行,若超出浏览器页面则会自动增加滚动条。

11、标签指定式选择器(交集选择器)

        由两个选择器构成,第一个为标记选择器,第二个为class选择器或id选择器。

12、后代选择器:用来选择元素或元素的后代 (如 p strong)

13、并集选择器:各个选择器通过用逗号链接而成,任何选择器都可以作为并集选择器的一部分。

14、css层叠性与继承性

        不具有继承性的(边框、外边距、内边距、背景、定位、布局、元素宽高属性)

       注:当为body元素设置字号属性时,标题文本不会采用这个样式。

15、css优先级

       注:(1)继承样式的权重为0。

      <p id="header" class="blue">  <strong>继承性</strong>   </p>

     strong{  color:red; }          #header{  color:green;}

       虽然#header具有权重100,但被strong继承是权重为0,所以页面的文本显示红色。

       (2)行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。

       (3)权重相同时,CSS遵循就近原则,靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

                内嵌样式优先,这是因为内嵌样式比链入的外部文档更靠近。

16、复合选择器的权重无论为多少个标记选择器的叠加,其权重都不会高于类选择器。

        同理无论多少类选择器和标记选择器的叠加,权重都不会高于id选择器。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值