第二天.css 样式

css基础选择器

    标签选择器

    类选择器

    多类名选择器

    ID选择器

    通配符选择器

    

1.当既存在外部样式,又存在内部样式时,根据css样式排列顺序,位于较后面的若存在相同的定义样式,会替换前面的样式。如行内样式,会替换外部样式。

2.若存在多类选择器,也只与css样式的排列顺序有关,与类选择器中类的书写顺序无关。

3.ID 选择器只能使用一次,class选择器可以使用多次

eg:

<html>

     <head>

           <style>

                .firstStyle{

                      font-size: 50px;

                      }

               .secondStyle {

                    font-size :100px;

                    color:yellow;

                    }

          </style>

     </head>

    <body>

                <div  class="secondStyle   firstStyle">白居易</div>

    </body>

</html>

2.更改字体

font-weight:bold=700; 加粗;/normal 正常=400    数字没有单位

font-size:20px  数字要带px单位

<em></em> 加强标签  倾斜文字自动变色  加强      <i></i> 也有此作用

font-style:normal 让斜体变正常

font-family: 字体

字体联合设置

排列顺序:font-style/ font-weight/ font-size/ line-height(行高  行与行之间的距离)/ font-family 

字体连写   必不可少属性font-size;font-family;

font: 20px  "微软";

h1 {

text-align:center  (里面的文字居中对齐   而不是h1,h1是个盒子)

}

text-indent: 2em 首行缩进两个字符

text-decoration: none/ underline 是否加线   

<s>现价 199</s>  在内容中间产生一天横线。

取消横线即设置  s {

        text-decoration:none;

}

del 标签与 s 标签有相同的作用。

u、ins标签 给文本 添加下划线:text-decoration:underline

3.复合选择器

子代选择器  各个标签用空格隔开(子代中标签的样式)

div ul  li{

}

后代选择器   >

div ul>li

交集选择器

div.class {

}

eg: div.red  red 为一个class

并集选择器 ,

eg: a,span {

}

链接伪类选择器(:)

lvha 的顺序定义

未访问时的文本格式   a:link {

}

访问时的文本格式  a:visited {

}

悬浮时的文本格式  a:hover {

}

点击时的文本格式 a:active {

}

span,em,i {

}

猜你喜欢

转载自blog.csdn.net/zaoxi6240/article/details/83508156
今日推荐