CSS（一）

CSS代码风格

1 紧凑格式

h3{color:red;font-size:20px;}

2 展开格式

h3{ color:red; font-size:20px; }

选择器

1 基础选择器：包含标签选择器，类选择器，id选择器和通配符选择器
标签选择器：不能单独选一个或者某几个标签，只能全部选择同一标签名的。

标签名{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
...
}

类选择器：可以差异化选择不同的标签，单独选一个或者某几个标签。

.类名{
属性1：属性值1；
...}

<style>
        .red{
            color: red;
        }
    </style>
 <ul>
    <li class="red">Yamy</li>
    <li class="red">Jack</li>
    <li>Bob</li>
    <li>Lucy</li>
</ul>

多类名：class属性中写多个类名，多个类名之间用空格分开。

 <style>
        .red{
            color: red;
        }
        .font35{
            font-size: 35px;
        }
    </style>
    <div class="red font35">刘德华</div>

id选择器:html元素以id属性设置id选择器，CSS中id选择器以**‘#’**来定义。
和class不同的是 id只能调用一次，别人请勿使用。比方：可以相同名字，但身份证号必须唯一。

 #pink{
            color: pink;
        }
   <div id="pink">刘德华</div>

通配符选择器：* 选取页面中所有元素。

*{
margin:0;
padding:0;}

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签 ，比如p	不能差异化选择	较多	p{color:red;}
类选择器-	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择1个标签	id属性只能在每个HTML文件中出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	*{color :red;}

2 复合选择器

文字属性

**font-family**属性定义文本的字体系列；

h2{
            /*font-family: '微软雅黑';*/
            font-family: “Microsoft YaHei”,Arial,Helvetica;
        }

注意：各种字体之间必须使用英文状态下的逗号隔开；
一般情况下，如果有空格隔开的多个单词拼写的字体，加引号；
尽量给body指定字体；
font-size属性定义文本的字体大小；

 body{
            font-size: 16px;
        }

注意：px是最常用的单位；
谷歌浏览器默认的大小文字为16px;
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小；
可以给body指定字体大小；
标题标签比较特殊，需要单独指定文字大小；
font-weight属性定义文本的字体粗细；

.bold{
   
            font-weight: 700;
/* 700不加单位，等价于bold都是加粗的效果，实际开发中更喜欢数字 表示加粗或变细 400等价于normal*/
        }

font-style属性定义文本的风格；
最常用的就是将斜体标签 em/i 更改成正常的

 em{
       font-style: normal;
        }

属性值：normal：正常显示；
italic：斜体的字体样式；

复合属性

 body{
   
  font: font-style font-weight font-size/line-height font-family;
    /* 不能随便颠倒顺序*/
/* 不需要的属性可以进行省略，但必须保留font-size和font-family属性，否则font不起作用*/

        }

文本属性

**文本颜色color**

  div{
   
            /*color:red;*/
            /*color:#F7F7F7;!*十六进制*!*/
            color:rgb(255,0,89);/*RGB代码*/
            /*color:rgb(100%,0%,67%);!*十六进制*!*/

        }

text-align ****设置文本内容的水平对齐方式

 text-align: center|left|right;

text-decoration 装饰文本，可以对文本添加下划线，删除线，上划线等。

 text-decoration: none|underline|overline|line-through;
 重点：记住如何添加下划线，删除下划线？

text-indent ****用来指定文本的第一行的缩进，通常是将段落的首行缩进。

 p{
   
            /*text-indent: 20px; */
        /*    缩进多少像素，可以是负值*/
            text-indent: 2em; 
/* em是一个相对单位，就是当前元素（font-size）一个文字的大小，如果当前元素没有大小，则会按照父元素的1个文字大小*/
        }

line-height ****用来设定行间的距离（行高），控制文字行与行之间的距离。

 line-height: 26px;

CSS引入方式

1 内部样式表（嵌入式）

就是在HTML页面内部写样式表，但是单独写道style标签内部

1.理论上，可以放到HTML文档任何地方，但是一般会放到head标签中；
2.通过此种样式，可以方便控制整个页面中的元素样式设置。
3.代码结构清晰，但是没有实现结构与样式完全分离。

2 外部样式表（链接式）

样式单独写道CSS文件中，再引入到CSS中。

步骤：1.新建一个.css的CSS文件，把所有的CSS代码都放入此文件中（没有style标签）
2.通过link标签引入这个文件。

<link rel="stylesheet" href="css文件路径">

3 行内样式表（行内式）

就是在标签内部的style属性中设定CSS样式。

<p style="color: #63a35c;font-style: italic ">静静悄悄</p>

1.适合修改简单的样式
2.在双引号之间，写法符合css规范；
3.可以控制当前的标签设置样式。

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，吐血推荐	控制多个页面

复合选择器

1 后代选择器

可以选择父代里面的孩子

元素1 元素2 {样式声明} 选择元素1里面的所有元素2，中间用空格隔开，元素1是父级，元素2是子集，最终选择的是元素2；元素2 可以是儿子，也可以是孙子。只要是元素2的子代就可以。

2 子选择器

只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

元素1>元素2 {样式声明} 选择元素1里面的所有直接后代（子元素）元素2
元素2必须是亲儿子，其孙子，重孙之类的都不归他管 ，可以叫做 亲儿子选择器

3 并集选择器

选择多组标签，同时为他们定义相同的样式。
元素1，元素2 {样式声明}

4 伪类选择器

链接伪类选择器

/*1 a:link 未访问的链接*/
        a:link {
   
            color: black;
        }
        /* 2 a:visited 访问过的链接*/
        a:visited {
   
            color: gray;
        }
        /*a:hover 鼠标经过的那个链接*/
        a:hover {
   
            color: aqua;
        }
        /*visited一定要放到hover前面，否则无法实现*/
        /*4  a:active  鼠标按下还未弹起的那个链接*/
        a:active {
   
            color: green;
        }
        <div class="nav">
    <a href="#">我是儿子1</a>
    <p>
        <a href="#">孙子</a>
    </p>
    <a href="#">我是儿子3</a>
    <a href="#">和还能不能宝宝更改</a>
<!--    为什么点了一个链接，其他链接也变成灰色-->
<!--注意事项：请按照LVHA的顺序声明：link-visited-hover-active-->
<!--实际开发中常用的--