CSS 学习笔记
CSS
CSS 是层叠样式表 ( Cascading Style Sheets ) 语法由三部分构成：
选择器、属性和值： selector {property: value}
/*这是个注释*/
p {color:red;text-align:center;}
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
image
内容与表现分离，有了CSS，网页的内容(HMTL)与表现就可以分开了。
有三种方法可以在站点网页上使用样式表：
- 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
- 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
- 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式
id 和 class 选择器
id 选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
ID属性不要以数字开头
ID属性只能在每个 HTML 文档中出现一次
class 选择器
class 选择器用于描述一组元素的样式，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
/* id 选择器 */
#para1
{
text-align:center;
color:red;
}
/* class 选择器 */
.center {text-align:center;}
/*所有的 p 元素使用 class="center" 让该元素的文本居中:*/
p.center {text-align:center;}
[https://www.w3cschool.cn/css3/css3-selector.html
]
样式表
外部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
编辑保存 mystyle.css 内容
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
内部
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
不要在属性值与单位之间留有空格
多重样式优先级顺序
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
backgroud
| name | desc |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
text
| name | desc |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
font
| name | desc |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
link
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
顺序规则
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
盒模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
image
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
250px (宽)
+ 20px (左 + 右填充)
+ 10px (左 + 右边框)
+ 20px (左 + 右边距)
= 300px
边框
CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线，对于这些线条，您可以自定义它们的样式、宽度以及颜色。使用CSS边框属性
border-style属性用来定义边框的样式
- dotted: 定义一个点线框
- dashed: 定义一个虚线框
- solid: 定义实线边界
- double: 定义两个边界。 两个边界的宽度和border-width的值相同
- groove: 定义3D沟槽边界。效果取决于边界的颜色值
- ridge: 定义3D脊边界。效果取决于边界的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
- outset: 定义一个3D突出边框。 效果取决于边界的颜色值
| name | desc |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
p
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}
外边距
CSS Margin(外边距)属性定义元素周围的空间。
CSS Margin属性接受任何长度单位、百分数值甚至负值。
- auto 设置浏览器边距。这样做的结果会依赖于浏览器
- length 定义一个固定的margin（使用像素，pt，em等）
- % 定义一个使用百分比的边距
内边距
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
将段落的内边距设置为父元素 width 的 20% 的示例：
p {padding: 20%;}
大小
| name | desc |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
显示
CSS display 属性和 visibility属性都可以用来隐藏某个元素
- display 设置一个元素应如何显示
- none
- block
- inline
- visibility 指定一个元素应可见还是隐藏
- hidden
块和内联元素： 块元素是一个元素，占用了全部宽度，在前后都是换行符。内联元素只需要必要的宽度，不强制换行。
定位
将布局的一部分与另一部分重叠。可以将元素放在另一个元素前面或后面
- fixed 相对于浏览器窗口是固定位置
- Relative 相对定位元素的定位是相对其正常位置 相对定位元素经常被用来作为绝对定位元素的容器块。
- Absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
浮动
CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
选取器
后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以波浪号分隔）
<style>
div p
{
background-color:yellow;
}
</style>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
伪类 伪元素
CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
CSS伪元素是用来添加一些选择器的特殊效果。
CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。
<html>
<head>
<style>
p:first-child
{
color:blue;
}
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
响应式web
Viewport
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
