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/height的属性值可以通过两种方法定义(以width属性为例)：

百分比："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元素，它包括：边距，边框，填充，和内容。

111

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可以更改内联元素和块级元素的属性

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!（如有错误，多多指出！）

css的入门笔记