CSS介绍
CSS(Casading Style Sheet)层叠样式表 用来调节标签的样式
当浏览器读到一个样式表,它就会按这个样式表来对文档进行格式化(渲染)
CSS注释
/*这是注释*/ /* 注释1 注释2 注释3 */
CSS语法
每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
CSS三种引入方式
-
行内样式
行内式是在head内style标签内部直接书写CSS代码。不推荐使用。
<p style="color: red">Hello world.</p>
- 内部样式
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
-
外部样式
外部样式就是将CSS写在一个独立的文件中,然后在页面进行引入即可。推荐使用此方法。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
基本选择器
-
元素选择器
p {color: "red";}
- ID选择器
#i1 { background-color: red; }
- 类选择器
.c1{ font-sizee:14px; } p.c1{ color:red; }
注意:
样式类名不要用数字开头
- 通用选择器
*{ color:white; }
组合选择器
-
后代选择器
/*li内部的a标签设置字体颜色*/ li a { color: green; }
- 儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
- 毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
- 弟弟选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; }
属性选择器
有[]的都是属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
/*找到所有title属性以hello开头的元素*/ [title^="hello"] { color: red; } /*找到所有title属性以hello结尾的元素*/ [title$="hello"] { color: yellow; } /*找到所有title属性中包含(字符串包含)hello的元素*/ [title*="hello"] { color: red; } /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/ [title~="hello"] { color: green; }
分组与嵌套
-
分组
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式 。
例如:
div, p { color: red; }
上面的代码为div标签和p标签统一设置字体为红色。
通常,我们会分两行来写,更清晰:
div, p { color: red; }
多种选择器可以混合起来使用,比如:.c1类内部所有p标签设置字体颜色为红色
.c1 p { color: red; }
/* 未访问的链接 默认蓝色*/ a:link { color: #FF0000 } /* 鼠标移动到链接上 悬浮状态的颜色*/ a:hover { color: #FF00FF } /* 选定的链接 点击链接时的颜色*/ a:active { color: #0000FF } /* 已访问的链接 点击链接后的颜色*/ a:visited { color: #00FF00 } /*input输入框获取焦点时样式*/ input:focus { outline: none; background-color: #eee; }
伪元素选择器
-
first-letter
常用的给首字母设置特殊样式
p:first-letter { font-size: 48px; color: red; }
- before
/*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; }
- after
/*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; }
before和after多用于清除浮动