Css基本语法

Css概述

CSS 是一种描述 HTML 文档样式的语言。

1.CSS 指层叠样式表 (Cascading Style Sheets)
2. 样式定义如何显示 HTML 元素
3. 样式通常存储在样式表中
4. 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5. 外部样式表可以极大提高工作效率
6. 外部样式表通常存储在 CSS 文件中
7. 多个样式定义可层叠为一个

CSS 规则集（rule-set）由选择器和声明块组成：
CSS 选择器
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。
CSS 选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
html和css结构样式分离，写法上html属性和属性值用=拼接，css属性和属性值是 ：拼接
css 层叠样式表

css 写法

基本样式

一 内联样式表style样式
二 内部样式style标签
三 外部样式表 link标签 引用外部（加载快）
@import url(“”);外部（加载慢）

层叠：同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠‘
冲突：同一元素设置相同的属性会造成冲突，会遵循就近原则选择属性值
继承：在父子关系中，文本样式可以被继承布局样式 不能被继承
块级元素可以继承父级的样式，行级不可以**

颜色 color background-color
1、英语字母
2、 十六进制
3、rgb(0-255,0-255,0-255)
4、rgba(0-255,0-255,0-255,0-1)
就近原则
相同样式优先级：
当设置相同样式时，后面的优先级较高。
但不建议重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置相同样式
那么后写的样式优先级更高

Css选择器：

1.标签选择器
《style》《style》
2.全局选择器
*{
margin: 0;
padding: 0；
}
3.class选择器
.p{ } 下面定义为标签 class=“p”
4.id选择器
#q{ } 下面定义为标签 id=“p”

5.群组选择器
b,a{
background-color: red;
}
6.层次选择器
（1）子代选择器 标识是>
ul>li{}
（2）后代选择器 标识是空格

（3）去除无序列表的点
.uu li{list-Style:none;}
（4）通用兄弟 标识是 ~
.uu_lia{}
（5）相邻兄弟 标识是+
.uu+a{}
7仿类选择器
ui防类 a标签使用
默认状态
b+a:link{background-color: yellowgreen;}
访问过后的状态
b+a:visited{background-color: aqua;}
鼠标悬浮的庄涛
b+a:hover{background-color: red;}
鼠标摁下的状态
b+a:active{background-color: orange;}

结构仿类
ul li:nth-child(3){background-color: orangered;}
a:nth-child(4){background-color: gold;}
ul p:nth-child(18){background-color: antiquewhite;}

选择器代码

<style>
         /* 1、标签选择器 */
        /* 2、全局选择器    *  */
        * {
            margin:0;
            padding:0;
        }
        /*  Class选择器 .q{}*/
        .q{background-color: blue; font-size: 30px;}
        /*  id  #  独一无二*/
        #q{background-color: blueviolet ; font-family: "宋体";}4
        /*  群组选择器  ， */
        b,a{
            background-color: gold ;font-size: 20px;
        }
        /* 6、层次选择器 */
        /* 子代选择器  > */
        ul>li{color: blueviolet;}
        /* 后代选择器  空格 */
        /* 去除无序列表的点 */
        ul li{list-style: none;}
        /* 相邻兄弟  + */
        li1+span{background-color:bisque}
        /* 通用兄弟  ~ */
        li~li3~li4{background-color: aqua;font-size: 50px;}
        /* 7、伪类选择器 */
        /* ui 伪类  a标签使用 */
        /* 默认状态 */
        b+a:link{background-color: chartreuse;}
       /* 、访问过后的状态 */
        b+a:visited{background-color: aquamarine;}
        /* 鼠标悬浮 */
        b+a:hover{background-color: blueviolet;}
        /* 鼠标悬浮 */
        b+a:active{background-color: beige;}

        /*结构伪类  */
        ul li:nth-child(3){background-color: orangered;}
        a:nth-child(4){background-color: gold;}
        ul p:nth-child(18){background-color: antiquewhite;} 
    </style>