一

        CSS的注释方式:
        /*注释的内容*/

CSS的引入

:
1.行内样式(通过style属性设置)
语法: 属性1: 属性值1; 属性2: 属性值2;
2.内部样式(写在head标签里面,用style标签嵌套)
语法:
选择器{属性1: 属性值1;属性2: 属性值2;}
3.外部样式
1、(新建一个.css文件,用link标签关联)–推荐使用
link标签
rel 定义当前文档与引入文档的关系(relationship)–stylesheet样式表
type 声明引入文件的类型
href 引入文件的路径

语法:

                    选择器{属性1: 属性值1;属性2: 属性值2;}
              2、(写在head标签里面,用style标签嵌套)--不建议使用
                语法: @import url()
                
        CSS引入方式的对比:
            行内样式只作用于当前标签
            内部样式只作用于当前文档
            外部样式可重复引用
                link和@import的区别:
                    加载顺序不一样:
                    (link: 先渲染好CSS, 再显示html和css--房子装修好再入住;
                    @import:先显示html,再渲染CSS--先住毛坯房,再装修)
 
**

css两个特性

**
1.层叠 一个html文档可能会使用多种css样式，细化到某元素上来说，会层叠多层样式单，但生效总会有一个顺序，及样式生效的优先级如下：
内联样式>内部样式>外部样式>浏览器默认效果
2.继承 继承指的是特定的css属性可以从父级向下传递到子元素 文本样式属性中color，text-开头的，line-开头的，font-开头的，word-space等都能够被继承。

        CSS选择器的原则:
            精准选中需要加样式的标签, 且不影响其他标签
        基础选择器:
            标签选择器(元素选择器):   直接使用标签名
            类选择器(class选择器): 使用.进行选择
            id选择器: 使用#进行选择(在一个文档里面必须具有唯一性)
            通配符选择器:直接使用*匹配页面的全部元素(一般用于清除浏览器默认的样式)
            属性选择器（[属性名]，[属性名=''])
        复合选择器:
            交集选择器:  由标签选择器+class选择器|id选择器,中间不能有空格(既要满足标签名,又要满足该class名)
            并集选择器:  多个选择器选中的元素共用一个样式,用逗号隔开
            后代选择器:  选择元素或元素组的后代(用空格隔开选后代)
            子代选择器:  选择元素或元素组的子代(用>选子代)
            兄弟选择器:  选择元素后面的兄弟元素(用+选择最临近的兄弟; 用~选择所有兄弟元素) 

a:link {color:chartreuse;} /* 未访问链接*/
a:visited {color:red;} /* 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上，hover必须放在link和visited 后面才会生效 /
a:active {color:#0000FF;} / 鼠标点击时 */

       伪类选择器：是指那些处在特殊状态的元素，伪类名可以单独使用，泛指所有的元素，也可以和元素名称连起来使用，
            特指某类元素，伪类以冒号（：）开头，元素选择器和冒号之间不能有空格。伪类名中间也不能有空格。
       伪元素选择器：伪元素是指那些元素中特别的内容，与伪类不同的是，伪元素表示的是元素内部的东西，逻辑上是存在的，但在文档数中，并不存在与之对应关联的部分，
                伪元素选择器的格式与伪类选择器一致，为了区分伪类和伪元素的区别，通常伪元素会用两个冒号 ：：
       
        伪类：
        :hover{}:把鼠标悬悬停到元素上面的样式。
        :first-child{}:伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
        :first-of-type{}:选择到父元素下的第一个元素
        :focus 选择获得焦点的 <input> 元素。
        :last-child 选择作为其父的最后一个子元素的每个 <p> 元素。
        :last-of-type 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
        :nth-child(n) 选择作为其父的第二个子元素的每个 <p> 元素。even偶数/odd奇数
        :nth-of-type(n) 选择作为其父的第二个 <p> 元素的每个 <p> 元素。

        伪元素：
        ::after     p::after    在每个 <p> 元素之后插入内容。
        ::before    p::before   在每个 <p> 元素之前插入内容。
        ::first-letter      p::first-letter 选择每个 <p> 元素的首字母。
        ::first-line        p::first-line   选择每个 <p> 元素的首行。


        怪异盒子模型(IE):
            实际宽度 = 内容宽度 + 填充物宽度 + 纸皮的厚度
            width = content-width(内容宽度) + padding(内边距) + border(边框)
            margin(外边距)不计入实际宽度
        标准盒子模型:
            实际宽度= 内容宽度
            width = content-width(内容宽度)
            margin(外边距)不计入实际宽度  

            padding:10px 10xp 10px 10px ;
            padding:
                padding-top
                padding-right
                padding-bottom
                padding-left
                padding:10px 10px;
                (padding的值: 
                    只有一个值时, 表示是上右下左四个方向共用一个值;
                    两个值时,表示上下为第一个值,左右为第二个值[中间用空格隔开];
                    三个值时,表示上为第一个值,左右为第二个值,下为第三个值;
                    四个值时,表示分别对应上,右,下,左(顺时针)
                )
            
            margin:
                margin-top
                margin-right
                margin-bottom
                margin-left
                (margin的值: 
                    只有一个值时, 表示是上右下左四个方向共用一个值;
                    两个值时,表示上下为第一个值,左右为第二个值[中间用空格隔开];
                    三个值时,表示上为第一个值,左右为第二个值,下为第三个值;
                    四个值时,表示分别对应上,右,下,左(顺时针)
                )
                margin的妙用: 当盒子指定了宽度时, margin: auto可以水平方向居中
                
            border: 线条宽度    线型(dashed|solid)  颜色
                border-top
                border-right
                border-bottom
                border-left
                (没有指定方向时, 表示是上右下左四个方向共用一个值;)
 


        三角形:
            1.宽高为0
            2.给border不同方向设置透明色
            3.需要三角形的地方设置颜色
        圆:
            width和height一致时,border-radius: 50%
        
        
        圆角属性:
            宽高一致时,50%为圆形
            宽高不一致时,50%为椭圆形
            值为固定值时,边框有圆角


        块级元素: 独占一行,不设置宽度时,宽度占满屏幕,可以设置宽高;
        行内元素: 不独占一行,宽度由内容撑开, 不可以设置宽高;
        
        
        display: block          转成块级元素(可以设置宽高)
        display: inline-block;  转成行内-块级元素(拥有块级可以设置宽高的特点,又行内元素不独占一行的特点)
        display: inline;        转成行内元素(不可以设宽高，margin-top,margin-bottom无效)
        display: none;          隐藏元素