0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,导入样式表、选择器、常用基本样式

# CSS层叠样式表

##  CSS层叠样式表 - CSS的作用 - HTML结构和CSS样式如何关联到一起(CSS引入方式) > CSS作用:给HTML元素添加静态或者动态(JS)的CSS样式

###  CSS的引入方式 面试题 - 行内式:直接写在html标签的后面,在通过标签属性style来引入的,项目中从来不会用到 ``` <div style="color: orange;">行内式</div> ```

- 内嵌式:将CSS代码单独放在style标签内,通过css选择器来选择html元素     - style标签一般放在head标签内,title标签下  ```    <style>         div {             color: orangered;         }     </style>     <div>盒子1</div>     <div>盒子2</div>     <div>盒子3</div> ``` - 外链式:将CSS代码单独放的放在一个文件中,在通过link标签来进行引入的     -  link标签一般放在head标签内,title标签下  

```     <link rel="stylesheet" href="style.css" type="text/css">     <div>盒子1</div>     <div>盒子2</div>     <div>盒子3</div> rel="stylesheet",样式表,不可缺少 href=""样式表的地址、路径 type="text/css"类型、可以省略掉 ```

- 导入式:将CSS代码单独放在一个文件中,再通过style标签来引入    -  ```  <style>         @impor "style.css";     </style>     <div>盒子1</div>     <div>盒子2</div>     <div>盒子3</div> ```

####  外链式和导入式的区别 面试题 - 区别一: 外链式l是通过ink标签来引入的  导入式是@import一条语句,不是html标签,也不是css样式 - 区别二:加载的顺序不同,外链式的CSS样式表是和html标签同时加载的,而导入式是先把html标签加载完,在加载CSS样式表

###  CSS选择器 > 作用:为了获取html元素,并给html元素添加css样式 语法:css选择器{css属性名:css属性值;} > css属性名和css属性值之间用":"隔开,用分号";"结束 ```  div{color: orangered;} ```

|选择器|语法|权重| |-|-|-| |标签选择器|div(html元素来当选择器)|1| |类选择器|.div(通过给html元素添加class属性值,用class属性值的属性名字来当选择器)|10| |ID选择器|#div1(通过给html元素添加id属性值,用ID属性值的属性名字来当选择器)|100| |通配符选择器|"*"{css属性名:css属性值}|0 < * < 1| |后代选择器|祖辈选择器 后代选择器{}|所有选择器权重相加之和| |分组选择器|选择器1,选择器2,选择器3{css样式}|独立计算的,不会相加| |子级选择器|父级选择器>子级选择器|所有选择器权重相加之和| |伪类选择器||10| |标签属性选择器|[标签属性名]{css样式}、[标签属性名=标签属性值]{css样式}|10| |交集选择器||所有选择器权重相加之和|

#### 标签选择器 直接把html元素当作选择器来用 权重:1 > 标签选择器会选择html标签当中所有的标签 ```   <style>         div{color: orchid;}     </style>

    <div>1</div>     <div>2</div> ```

#### 类选择器 将html元素后面添加class标签属性,利用标签属性值(类名)当作选择器来用,在标签属性值前面加一个"." 权重:10 > 标签属性值(类名)可以重复使用 > 标签属性值(类名)可以有多个,标签属性值(类名)之间用"空格"隔开 ```  <style>         div{color: red;}         .div2{color: green;}         .title{font-size: 30px;}     </style>

    <div>红色</div>     <div class="div2">绿色</div>     <p class="div2 title">段落</p>     <p>11111</p> ```

#### ID选择器  将html元素后面添加ID标签属性,利用标签属性值当作选择器来使用,在标签属性值前面加一个"#"  权重:100  > ID在页面中具有唯一性,不能重名  > ID选择器是配合javascript来使用的 ``` <style>     #div1 {         color: orange;     } </style> <div id="div1">大盒子</div>   ```

#### 通配符选择器 匹配了所有的html元素 语法*{css属性名:css属性值} 权重:0 < * < 1 > 在项目中,通配符选择器不用,他比较消耗性能 > reset.min.css 清除默认样式表 ``` * {         margin: 0;         padding: 0;     }

```

#### 后代选择器(派生选择器) 在一个根元素(大盒子)的范围内,去查找它的后代元素 语法:祖辈选择器 后代选择器{} 权重:所有选择器权重相加之和 > 作用:增加权重,精确查找范围 ```   ul li{        color: purple;    }    ul li span{        color: red;    }    .box ul li span{        color: green;    }    ul span{        color: yellow;    }    .box ul span{        color: blue;    }

 <ul>         <li>1</li>     </ul>     <ol>         <li>2</li>     </ol>     <div class="box">         <ul>             <li>                 <span></span>             </li>         </ul>         <ol>             <li>                 <span></span>             </li>         </ol>     </div>

```

#### 分组选择器 将同一份css样式,分给了不同的html元素,并给这个html元素添加css样式 语法:选择器1,选择器2,选择器3{css样式} 权重:独立计算的,不会相加

```   div,p,h2,span{         color: red;     }     <div class="box">大盒子</div>     <p>段落</p>     <h2>标题</h2>     <span>行内小模块</span> ```

#### 子级选择器 存在包含关系的元素选择,通过他的父级选择子级 语法:父级选择器>子级选择器 权重:所有选择器权重相加之和

``` .div>ul>li {        color: red;    }    <div class="div1">         <ul>             <li>1</li>         </ul>         <ol>             <li>2</li>         </ol>     </div>

```

#### 伪类选择器 给html元素添加某种状态 例如:鼠标经过时的状态 权重为:10 > 伪类选择器在项目中常用的状态时"hover" ```  /* hover 鼠标经过时的状态 */     .nav a:hover{         color: green;         font-weight: bold;

```

#### 标签属性选择器 利用标签属性名和标签属性值当作选择器来使用,来选择html元素 语法:[标签属性名]{css样式}            [标签属性名=标签属性值]{css样式} 权重:10 > 如果遇到HTML元素中带有class标签属性是,一般都用类选择器来选择html元素,不会使用标签属性选择器 ```     [title]{         color: red;     }     [title=dhz]{}     [class]{}     [class=box]{}     <div class="box" title="dhz">大盒子</div> ``` #### 交集选择器 两种选择器选择同属一个元素时,可以用我们的交集选择器来准确选择html元素 权重:所有选择器相加之和 > 交集选择器**标签选择器和类选择器集合**标签选择器和标签属性选择器相组合、变迁选择器和id选择器相结合、类选择器和类选择器相结合、类选择器和标签属性选择器相结合

```  /* 最常用的 */     div.box{         color: red;     }     div[box]{         color: red;     }     .box[title]{         color: red;     } <div class="box" title="dhz"></div>

```

### CSS常用的样式

``` /* 高度 */ height: 100px;

/* 宽度 */ width: 100px;

/* 背景颜色 */ green;     /* 字体颜色 */ color: white;

/* 字体大小 */ font-size: 16px;

/* 文字水平居中 left居左是默认值,right居右,center居中 */ text-align: center;

/* 行高,文字垂直居中 */ line-height: 100px;

/* 文字加粗  bold加粗,normal去掉加粗*/ font-weight: bold;     /* 首行缩进 */ text-indent: 2em;

 /* 行间距 */ line-height: 26px; font-size: 14px;    /* 去掉下划线 */ text-decoration: none;

 /* 去掉小黑点/序号,去掉标签的默认样式 */ list-style: none; ```  

相关文章