css入门笔记
这些都是本人（小白）在学习css过程中记录下的笔记，都是些基础的知识，部分知识没有深入了解css的简介
什么是css？
css指层叠样式表,可以定义如何显示html元素，控制页面的布局与外观。书签
- css的三种基本选择器
- css的四种组合选择器
- css的伪类选择器
- css的伪元素选择器
- css的三种创建方法
- css的背景属性
- css的尺寸属性
- css的文本属性
- css的字体属性
- css的列表属性
- css的盒子模型
- css的边框模型
- css的display属性
- css的浮动float
- css的定位position
css的内容
css的注释
/*这是css的注释*/
css的三种基本选择器
标签选择器，id选择器，class选择器/*标签选择器:用于修饰标签是<div>的所有元素*/
div {
color:yellow;
}
/*id选择器:用于修饰id=id1的所有元素*/
#id1 {
color:yellow;
}
/*class选择器:用于修饰class=class1的所有元素*/
.class1 {
color:yellow;
}
css的四种组合选择器
后代选择器，子元素选择器，相邻兄弟选择器，普通兄弟选择器/*后代选择器:用于修饰<div>标签中的所有<p>标签*/
div p {
color:yellow;
}
/*子元素选择器:用于修饰<div>标签中的子元素<p>标签*/
div>p {
color:yellow;
}
/*相邻兄弟选择器器:用于修饰<div>标签的后的相邻第一个<p>标签*/
div+p {
color:yellow;
}
/*普通兄弟选择器:用于修饰<div>标签的后的相邻所有<p>标签*/
div~p {
color:yellow;
}
css的伪类选择器
css伪类用于添加一些选择器的特殊效果。（简）a:link {color:yellow;} /* 未访问链接时，链接显示的颜色*/
a:visited {color:red;} /* 已访问链接后，链接显示的颜色 */
a:hover {color:black;} /* 鼠标移动到链接上时，链接显示的颜色 */
a:active {color:green;} /* 鼠标点击链接时，链接显示的颜色 */
input:focus{background-color:yellow;} /*输入框获取焦点时的变化*/
css的伪元素选择器
css伪元素是用来添加一些选择器的特殊效果。（简）p:after{
content:"**"; /*在每个<p>标签后添加"**"*/
}
p:before {
content:"**"; /*在每个<p>标签前添加"**"*/
}
css的三种创建方法
外部样式表：在<head>头部中，添加<link>标签链接css文件，在该css文件中定义样式表<!--html文件-->
<head>
<link rel="stylesheet" type="text/css" href="wuhu.css">
</head>
/*css文件:wuhu.css*/
div {
color:yellow;
}
内部样式表：在<head>头部，添加<style>标签，在该标签中定义样式表
<head>
<style>
div {
color:yellow;
}
</style>
</head>
内联样式：在标签内使用<style>属性，在该属性中定义样式
<div style="color:yellow;background-color:red"></div>
css的各种属性
css的背景属性
| 属性 | 描述 |
|---|---|
| background | 简写属性 |
| background-color | 设置元素的背景颜色 |
| background-image | 将背景设置成图片 |
| background-position | 设置背景图像的起始位置 |
| background-repeat | 设置背景图像是否重复填补 |
| background-attachment | 设置背景图像是否固定还是随动 |
对background-color（包括所有关于color的属性）的扩展：
颜色的属性值可以通过三种方法定义（以黄色为例子）：
- 16进制值："#FFFF00"
- RGB值："rgb(255,255,0)"
- 颜色名称："yellow"
css的尺寸属性
| 属性 | 描述 |
|---|---|
| width | 设置元素的宽度 |
| height | 设置元素的高度 |
- 百分比："width:20%;"
- 像素："width;20px;"
css的文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 设置文本格式对齐 |
| text-decoration | 设置文本的修饰 |
| text-indent | 设置文本首行的缩进 |
| text-shadow | 设置文本的阴影 |
对text-decoration属性的扩展：
| text-decoration的属性值 | 描述 |
|---|---|
| none | 默认（可用于去除超链接的下划线） |
| underline | 定义文本的下划线 |
| overline | 定义文本的上划线 |
| line-through | 定义文本的删除线 |
对text-align属性的扩展：
| text-align的属性值 | 描述 |
|---|---|
| left | 把文本排列到左边 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
| justify | 将文本实现两端对齐 |
| inherit | 从父类继承text-align属性值 |
css的字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性 |
| font-family | 设置字体字型 |
| font-size | 设置字体大小 |
| font-style | 设置字体样式 |
| font-weight | 设置字体粗细 |
css的列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性（格式：type, position, image;） |
| list-style-image | 将列表项标志设置成图像 |
| list-style-position | 设置列表中列表项标志 |
| list-style-type | 设置列表项标志的属性以及类型 |
对list-style-type属性的扩展：
| list-style-type的属性值 | 描述 |
|---|---|
| none | 无标记（可用于去除列表的列表项标志） |
| disc | 标志是实心圆 |
| circle | 标志是空心圆 |
| square | 标志是实心方块 |
| decimal | 标志是数字 |
| lower-roman/upper-roman | 标志是小写/大写罗马数字 |
| lower-alpha/upper-alpha | 标志是小写/大写英文字母 |
| lower-latin/upper-latin | 标志是小写/大写拉丁字母 |
| lower-greek | 标志是小写希腊字母 |
css的盒子模型
CSS盒子模型封装周围的HTML元素，它包括：边距，边框，填充，和内容。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
css的边框模型
| 属性 | 描述 |
|---|---|
| border | 简写属性，设置边框的所有属性（格式：width,style,color） |
| border-style | 简写属性，设置一个或多个边框的样式 |
| border-width | 简写属性，设置一个或多个边框的宽度 |
| border-color | 简写属性，设置一个或多个边框的颜色 |
| border-top | 简写属性，单独设置上边框的所有属性（格式：width,style,color） |
| border-right | 简写属性，单独设置右边框的所有属性（格式：width,style,color） |
| border-bottom | 简写属性，单独设置下边框的所有属性（格式：width,style,color） |
| border-left | 简写属性，单独设置左边框的所有属性（格式：width,style,color） |
对border-(style/width/color)的扩展：
该属性接收不同的数量的参数时，所表达的含义有所差别（以border-style为例）：
- 接收四个参数：border-style:dotted solid double dashed;
- dotted对应的是上边框
- solid对应的是右边框
- double对应的是下边框
- dashed对应的是左边框
- 接收三个参数：border-style:dotted solid double;
- dotted对应的是上边框
- solid对应的是左，右边框
- double对应的是下边框
- 接收两个参数：border-style:dotted solid;
- dotted对应的是上,下边框
- solid对应的是左，右边框
- 接收一个参数：border-style:dotted;
- dotted对应的是四面边框
css的display属性
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
- visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
- display:block 可显示为块级元素
- display:inline 可显示为内联元素
css的浮动float
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
| 属性 | 描述 | 属性值 | 子描述 |
|---|---|---|---|
| folat | 指定一个元素是否可以浮动 | none | 默认值，元素不浮动 |
| right | 元素向右浮动 | ||
| left | 元素向左浮动 | ||
| inherit | 从父类继承float属性值 | ||
| clear | 指定元素周围有否允许出现浮动元素 | none | 默认值，允许出现浮动 |
| right | 不允许右侧出现浮动元素 | ||
| left | 不允许左侧出现浮动元素 | ||
| both | 不允许两侧出现浮动元素 | ||
| inherit | 从父类继承clear属性值 |
css的定位position
这里只介绍其中的三种定位方法：（通过top/right/left/bottom来控制位置）fixed定位：元素的位置相对于浏览器窗口是固定位置
.class {
position:fixed; /*选择fixed定位方法*/
top:10px; /*距离上边10px*/
right:10px; /*距离右边10px*/
}
relative定位：相对定位元素的定位是相对其正常位置
.class {
position:relative;/*选择relative定位方法*/
top:10px; /*距离上边10px*/
left:10px; /*距离左边10px*/
}
absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
.class {
position:absolute;/*选择absolute定位方法*/
bottom:10px; /*距离下边10px*/
right:10px; /*距离右边10px*/
}
end!（如有错误，多多指出！）
扫一扫
679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
