前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性

前端基础学习（2） CSS三种引用方式 CSS选择器类型 CSS属性

一、今日内容

• CSS的三种引用方式
• CSS选择器的类型
• CSS属性

二、CSS的三种引用方式

CSS（Cascading Style Sheet），即层叠样式表，主要用于定义如何显示HTML元素，给HTML设置样式，让它更加美观；

CSS的基本语法为：

同时，CSS的注释语法与HTML也不同：

/*这是一条CSS注释语句*/

那么，如何将CSS和HTML统一起来呢，主要有三种方法实现：

1. head标签下引用

   <style>
   	div{
   		background-color: red;
   		height: 100px;
   		100px;
   	}
   </style>
   

2. 操作标签下引用

   <div style="background-color: blue; height: 200px;  200px">
   

3. 导入外部样式表

   创建CSS样式表文件：

   /*test.css*/
   div{
   	background-color: green;
   	 200px;
   	height: 200px;
   }
   

   然后再需要导入外部样式表的.html文件内的head标签下引用：

   <link re="stylesheet" href="test.css"
   

三、CSS选择器的类型

1. 基本选择器

   • 元素选择器

     div{
     	color: green;
     }
     

   • id选择器

     #yesimola{
     	color: green;
     }
     

   • 类选择器

     /*选择全部c1类型的标签*/
     .c1{
     	color: green;
     }
     
     /*选择div标签下class为c1的标签*/
     div.c1{
     	color: green;
     }
     

   • 通用选择器

     /*选择全部标签*/
     *{
     	color: green;
     }
     

2. 组合选择器

   • 后代选择器

     /*找到div标签后代里面的所有a标签*/
     div a{
     	color: red;
     }
     

   • 儿子选择器

     /*选择所有父级是div标签的a标签*/
     div>a{
     	color: red;
     }
     

   • 毗邻选择器

     /*选择所有紧邻这div标签之后的a标签*/
     div+a{
     	color: red;
     }
     

   • 弟弟选择器

     /*选择同级的div标签后的所有兄弟标签*/
     div~a{
     	color: red;
     }
     

3. 属性选择器

   /*找到所有含有title属性的标签*/
   [title]{
       color: red;
   }
   
   /*找到含有title属性的div标签*/
   div[title]{
       color: red;
   }
   
   /*找到含有type属性且属性为text的input标签*/
   input[type=text]{
       color: red;
   }
   

4. 正则选择器

   /*找到所有title属性以hello开头的元素*/
   [title^="hello"]{
   	color: red;
   }
   
   /*找到所有title属性以hello结尾的元素*/
   [title$="hello"]{
       color: red;
   }
   
   /*找到所有title属性包含hello的元素*/
   [title*="hello"]{
       color: red;
   }
   
   /*找到所有title属性中有一个值为hello的元素*/
   [title~="hello"]{
       color: red;
   }
   

5. 分组

   /*div和p标签设置共同的样式*/
   div, p{
       color: red;
   }
   

6. 伪类选择器

   /*选择未访问过的链接a标签*/
   a:link{
       color: green;
   }
   
   /*选择已访问的链接*/
   a:visited{
       color: green;
   }
   
   /*鼠标移动到链接上（可应用在其他标签上）*/
   a:hover{
       color: green;
   }
   
   /*选定的链接（点击未松开的那个瞬间）*/
   a:active{
       color: green;
   }
   
   /*input输入框获取光标时*/
   input:focus{
       background-color: green;
   }
   

7. 伪元素选择器（通过CSS来造标签，不推荐使用）

   • first-letter

     /*将p标签中文本第一个字改变颜色和大小*/
     p:first-letter{
         font-size: 40px;
         color: red;
     }
     

   • before

     /*将p标签中文本前面加上相应内容(CSS语法中，属性值内的字符要用单引号)*/
     p:before{
     	content: '?';
     	color: red;
     	font-size: 40px;
     }
     

   • after

     /*将p标签中文本后面加上相应内容*/
     p:after{
     	content: '!';
     	color: red;
     	font-size: 40px;
     }
     

8. CSS的继承

   我们对一个标签限定CSS样式，会直接影响父标签下除a标签外所有子标签的效果；

9. 选择器的优先级

   设定CSS选择器时，有时会选定多次个别标签，这时不同的CSS选择器的优先级顺序就显得尤为重要。选择器的优先级加权如下：

   选择器类型	优先级加权
   继承	0
   类选择器	10
   元素选择器	11
   id选择器	100
   内联样式	1000
   属性值后加!important	INF

   优先级数字越大，越优先展示其效果，优先级相同的，显示后面定义的选择器对应的样式；

四、CSS属性

1. 高度宽度设置

   • 内敛标签的宽度（width）高度（heigtht）无法设置，只和文字覆盖区域有关；
   • 块级标签的宽度高度可设置；

2. 字体属性

   • 字体类型（如果选择多个字体属性浏览器会寻找第一个可使用的字体）

     font-family: '楷体', '宋体', '微软雅黑';
     

   • 字体大小（默认伪16px）

     font-size: 16px;
     

   • 字体颜色

     字体颜色具有：十六进制、RGB、颜色名、RGBA四种表示方法。

     color: purple;
     

   • 字重（粗细）

     font-weigth: bold;
     

     该属性对应的属性值主要包括：

     • normal：default；
     • bold；
     • bolder；
     • lighter；
     • 100-900：400对应normal，700对应bold；
     • inherit：继承父元素字体的粗细值；

3. 文字属性

   • 文字对齐

     text-align: rigth;
     

     该属性对应的属性值主要包括：rigth、left、center、justify（两边对齐）;

   • 文字装饰

     text-decoration: none;
     

     该属性对应的属性值只要包括：none（常用于给超链接a标签去掉下划线）、underline、overline、line-through、inherit等；

   • 首行缩进（英文字符默认占据16px）

     text-indent: 32px;
     

4. 背景属性

   • 背景颜色

     background-color: color;
     

     同文字颜色一样，也可以使用RGB、十六进制、RGBA、颜色名称四种方式表示；

   • 背景图片

     background-image: url("")
     

     如果设置尺寸超过了图片本身尺寸，会多个图片铺满整个背景区域，如果想要单个背景图片拉伸铺满屏幕，可以添加属性：

     /*关闭平铺*/
     background-repeat: no-repeat;
     /*将图片尺寸XY轴都缩放至背景的100%*/
     background-size: 100% 100%;
     

     此外，back-ground属性还具有repeat-x和repeat-y等属性值，分别代表横向平铺和纵向平铺；

     另外，我们可能还需要将图片位置设置在浏览器页面中央：

     background-position: center center;
     

     除center center属性值外，从左上角至右下角，位置属性值依次为：left topcenter top ight topleft center igth centerleft botton等；

     这么多属性也可以统一简写在一个属性内：

     background: url("yeye.jpg") no-repeat left center;
     

     小例子：利用background-attachment: fixed;让背景图片固定，即使鼠标滚轮上下滑动也保持位置：

     <!--case.html-->
     
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>滚动背景图示例</title>
         <style>
             * {
                 margin: 0;
             }
             .box {
                  100%;
                 height: 500px;
                 background: url("https://gitee.com/raigor1/img_folder/raw/master/img/image-20200924165150649.png") no-repeat center center;
                 background-attachment: fixed;
             }
             .d1 {
                 height: 500px;
                 background-color: tomato;
             }
             .d2 {
                 height: 500px;
                 background-color: steelblue;
             }
             .d3 {
                 height: 500px;
                 background-color: mediumorchid;
             }
         </style>
     </head>
     <body>
         <div class="d1"></div>
         <div class="box"></div>
         <div class="d2"></div>
         <div class="d3"></div>
     </body>
     </html>