CSS

1 CSS的四种引入方式

css对标签进行渲染,对页面的布局

(1)通过选择器找标签

(2)操作标签(属性操作)

CSS语法:

CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明

CSS的四种引入方式

(1)     行内式

(2)嵌入式 缺点:只能用于一个页面

(3)链接式(推荐) 创建一个文件,链接导入

效果如下

 (4)导入式(了解) 缺点:有数量限制

效果如下:

2 CSS选择器

基本选择器

(1)标签选择器---p{}

定义一个p标签时,文体中的标签会根据要求变化

(2)Id选择器---id{}

Id是标签的唯一身份认证,根据id来改变标签的形式

(3)class选择器---- .info(属性)

(4)通配选择器-----*{}

组合选择器

注意:关于嵌套标签

一般,块级标签可以包含内联元素或某些块级标签,但内联元素不能包含块级元素,他只能包含内联元素。

P标签不能包含块级标签

(1)后代元素选择器

匹配所有元素属于祖宗辈后代的所有元素 .祖宗辈 空格 后代

(2)子代元素选择器

 匹配所有祖宗辈元素的子元素 .祖宗辈 大于号 子元素

(3)毗邻元素选择器

匹配所有紧随祖宗辈元素之后的同级元素 .祖宗辈 加号 同级元素

(4)普通兄弟元素选择器

以破折号分隔

(5)多元素选择器

同时匹配所有元素,用逗号隔开

属性选择器

标签是可以自己加属性的

E[att]     匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。

                比如“[cheacked]”。以下同。)   p[title] { color:#f00; }

E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }

E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

                td[class~=”name”] { color:#f00; }

E[attr^=val]    匹配属性值以指定值开头的每个元素                   

                div[class^="test"]{background:#ffff00;}

E[attr$=val]  匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

E[attr*=val]  匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

伪类

(1)     anchor伪类:专用于控制链接的显示效果

 a:link(没有接触过的链接),用于定义了链接的常规状态。 

 a:hover(鼠标放在链接上的状态),用于产生视觉效果。      

 a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。       

  a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。       

        伪类选择器 : 伪类指的是标签的不同状态:     

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态       

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

 

原文地址:https://www.cnblogs.com/asaka/p/6890925.html