CSS 学习总结

CSS的基本语法结构

// h1 ——为选择器  大括号中编辑属性和值
// 设置字体颜色为红色，字体大小14px
h1 {
	color : red;
	font-size: 14px;
}

CSS 选择器

1. 标签选择器
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a

// 选择器以标签名 命名，说明样式给那个标签加
html {color: black;}
p {color: gray;}
h2 {color: silver;}
h2 , p {font-size: 20px}

2. 类选择器
在HTML文档中的指定标签上 加class属性，给该标签加属性时就可以用 . class名来当选择器

// css样式书写
.size {
    font-size: 20px }
// html文档加class属性
<p class="size">类选择器</p>

3. ID 选择器
不同于类选择器，ID 选择器不能结合使用，ID 选择器会使用一次，而且仅一次

// css样式书写
#size {
    font-size: 20px }
// html文档加class属性
<p id="size">类选择器</p>

4. 后代选择器
后代选择器可以选择作为某元素后代的元素

// css 代码
h1 em {
   color:red;}
// 把h1 标签下的 em标签颜色改为红色
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

5. 子元素选择器
子元素选择器只能选择作为某元素子元素的元素

// css 代码
h1 > strong {color:red;}
// 规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

6. CSS 相邻兄弟选择器
相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素。

// css 代码
h1 + p{
   color: red}
// 样式选中的是 与h1 同级的 第一个p元素
<body<