CSS3自学DAY1

一、使用css修改元素的样式

1.在标签内部用style属性来设置（行内样式）例如：<p style="color:red" font-size:60px>是将本标 签内部的元素颜色变为红色字体大小60。

存在问题：样式只对一个标签起作用，想要影响多个元素需要复制粘贴多次。

2.将样式编写到head的中的style标签中（内部样式）

问题：只对一个网页起作用，不能跨网页影响。

3.将CSS样式编写到一个CSS文件中，用语句： <link rel="stylesheet" href="./1.css">语句引入。

此方法可以使用浏览器的缓存机制，加快网页加载速度。

二、基本语法

选择器：通过选择器选择指定元素。                                                                                                

声明块：通过声明块指定为元素设置样式，由一个声明组成，是一个名值对结构，一个样式名对应 一个样式值，名和值之间用冒号连接，用分号结束

三、常用选择器

1. 元素选择器

作用：根据标签名来选中指定元素

语法：标签名{}

例子：p{},h1{},div{}

2.ID选择器

作用：根据ID来选中元素

语法：#ID属性值{}

例子：#box{},#red{}

 

 

3.类选择器

作用：class属性与ID相似，不同的是class属性可以重复使用，可以通过class进行元素分类。可以同时为一个元素指定多个class，不同class之间用空格隔开。

语法：.class属性值{}

 

 

4.通配选择器

作用：选中所以元素

语法：*{}

5.交集选择器

作用：选中同时符合多个条件的。

语法：选择器1选择器2选择器n{}

注意：如果含有元素选择器，必须以元素选择器开头。

6.并集选择器

 作用：同时选择多个

语法：选择器1，选择器2，选择器n{}

7.关系选择器

a.子元素选择器 语法：父元素>子元素

b.兄弟元素选择器 语法：前一个+后一个（选择下一个兄弟）

                                         前一个~后一个（选择下边所有兄弟）

 

 

8.属性选择器

 【属性名】{}：选择含有指定属性的元素

【属性名=属性值】{}：选择指定属性为属性值的元素。

【属性名^=属性值】{}：选择以指定的属性值开头的元素。

【属性名￥=属性值】{}；选择以含有指定属性值的元素。

【属性名*=属性值】{}；选择以指定属性值结尾的元素。

 

 四、伪类

 伪类用来描述一个元素特殊状态，如：第一个元素、被点击的元素、鼠标移入的元素……

1.语法：用一个冒号开头

         ：frist-child{}   第一个子元素2.

         ：last-child{}   最后一个子元素

         ：nth-child(n){}  第n个子元素 1.直接写n，指所有元素。2.写2n或者even指偶数位元素。3.写2n+1或者odd指奇数位元素。

注意：以上均是指所有的子元素进行排序。

例子：ul>li:nth-child(4){color="red"}指选中ul里面的第四个元素，将其变为红色。

2.

   ：not()否定类

   ：frist-of-type{}    :last-of-type{}    :nth-of-type(){}  同类型元素进行排序

例子：ul>:not(:nth-child(3)){color="red"}  选中除了第3个元素外其他元素，变为红色。

3.伪链接

a:link   表示访问过链接                                  a:visited 表示没访问过的链接（只能修改颜色）

a:hover用来表示鼠标移入的状态（也可以用于其他标签）

a:active鼠标点击时的状态。（也可以用于其他）

 

4.伪元素  用两个冒号开头

::frist-letter 第一个字母                         ::frist-line第一行元素       ::selection 鼠标选中的内容

::before和::after结合content属性使用。（开发中常用）

例子：