CSS的基本内容
CSS:层叠样式表 Cascading Style Sheets
(将多个样式按照一定顺序书写最终呈现的效果)
ps:如果在HTML页面里面需要写css样式就要去写style标签
CSS写法:
1.先写 标签
2.选择指定的标签名作为css的选择器
3.书写 花括号(大括号)
4.书写 属性:属性值
5.当有多个属性时用;分号隔开即可
CSS需要掌握的基本的选择器
1.通用选择器 * 大家一起用一般修饰整体的文字样式
①选择器选择所有元素。
实例
选择所有元素，并设置其背景色：
*
{
background-color:yellow;
}
②选择器也可以选择另一个元素内的所有元素。
实例
选择div元素内的所有元素：
div *
{
background-color:yellow;
}
2.标签选择器 使用指定标签的名称 更多使用在去掉默认样式的时候
实例
选择所有p 元素
p{text-align: center ;
color: blue;}
3.id选择器
①标签里面写id=‘属性值’
②在style样式中,ID找#号 #+属性值
③id只能在标签中使用一次
实例
为 id=“firstname” 元素添加指定样式:
<body>
<style>
#firstname
{
background-color:yellow;
}
</style>
<h1>Hello</h1>
<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
</body>
4.class选择器/类选择器
①标签里面写class=‘属性值’
②在style样式中,class找.号 .+属性值
③class在标签中可以多次使用
实例
选择class="intro"的元素并设置样式
<body>
<style>
.intro
{
background-color:yellow;
}
</style>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
</body>
5.合并（逗号）选择器
实例
选择所有p元素和h1元素:
h1,p
{
background-color:yellow;
}
6.后代（空格）
实例
选择div元素内的所有p元素:
div p
{
background-color:yellow;
}
7.[attribute] 选择器
实例
选择所有带有target属性的 元素：
a[target]
{
background-color:yellow;
}
8.伪类选择器 带 ：的
①hover 选择器
实例
选择鼠标移到链接上的样式：
a:hover
{
background-color:yellow;
}
.p2_class:hover{color: bisque;transition: all 2s;}
②active 选择器
实例
选择激活的链接样式：
a:active
{
background-color:yellow;
}
③focus 选择器
实例
一个输入字段获得焦点时选择的样式：
input:focus
{
background-color:yellow;
}
④checked 选择器
实例
为所有选中的输入元素设置背景颜色：
input:checked {
height: 50px;
width: 50px;
}
⑤empty 选择器
实例
指定空的p元素的背景色：
p:empty
{
background:#ff0000;
}
⑥first-letter 选择器
实例
每个
元素的第一个字母选择的样式：
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
⑦first-line 选择器
实例
每个
元素的第一行选择的样式：
p:first-line
{
background-color:yellow;
}
⑧nth-child() 选择器
实例
指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
p:nth-child(2)
{
background:#ff0000;
}
nth-child(odd/even/一个数字) nth-child(odd/even/一个数字)
以上列举的选择器仅仅是比较常用的，还有很多的选择器请查阅CSS选择器参考手册
属性的命名规则（建议）
不能用数字或者非常的符号 。
名称需要有一定的含义 纯拼音或者英文名称(有道词典) 中英混搭。
多个类名时，一般情况下是有一个属于公共性的样式，另外一个属于该元素自有的特色样式。
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
