CSS
2019-03-31 21:58:41 67 举报AI智能生成
css
作者其他创作
大纲/内容
css属性
背景属性
background
background-attachment
背景图像是否固定或者跟着其余部分滚动
background-color
设置元素的背景颜色
color_name 如red
hex_name颜色为16进制的背景颜色 如 #f0000
rgb_name rgb(255.0.0)
transparent 默认，透明色
background-image
把图像设为背景
body {background-image:url(/d/1.png);}
background-position
设置背景图像的起始位置
关键字：1）left top（图像放置在元素内边距的左上角）。
如果只出现一个关键字，则认为另一个关键字是 center。
如果只出现一个关键字，则认为另一个关键字是 center。
center
top
bottom
right
长度值：2）50px 100px（图像的左上角将在元素内边距区左
上角向右 50 像素、向下 100 像素的位置上）。
上角向右 50 像素、向下 100 像素的位置上）。
百分比：例如：50% 50%（图像的左上角放置在元素内边距的中心）
background-repeat
设置背景图像是否平铺
repeat-x
图像在水平方向上重复
repeat-y
图像在垂直方向上重复
no-repeat
不允许图像在任何方向上平铺
字体和文本属性
font-size
设置字体的大小
smaller
larger
length
%
font-weight
设置字体的重量，例如：字体加粗bold
normal
bold
bolder
text-indent
设置文本缩进的距离，它的值可以像素px、字体的尺寸em或百分比
text-align
设置文本的对齐方式；它的值可以是：left（左对齐）、居中（center）、右对齐（right）、两端对齐（justify）
text-decoration
设置文本修饰
letter-spacing
设置文本内容的距离
text-transform
处理文本的大小写，它的值可以是：none、uppercase（大写）、lowercase（小写）、capitalize（驼峰）
表格样式
border-collapse
设置表格边框是否合为单一边框
border-spacing
设置单元格边框距离
caption-side
设置表格标题的位置
empty-cells
设置是否显示表格中的空单元格
table-layout
设置显示单元、行列的算法
注意：border-collapse和border-spacing属性不能够同时存在。
边框样式
整体
border-width
设置边框的宽度
border-color
设置边框的颜色
border-color
设置边框风格
soild（实线）
dotted（点线）
dashed（虚线）
doble（双线）
各边
border-left-width
设置元素左边框的宽度
border-left-color
设置元素左边框的颜色
border-left-style
设置元素左边框的风格
border-right-width
设置元素右边框的宽度
border-right-color
设置元素右边框的颜色
border-right-style
设置元素右边框的风格
border-top-color
设置元素上边框的颜色
border-top-style
设置元素上边框的风格
border-top-width
设置元素上边框的宽度
border-bottom-color
设置元素下边框的颜色
border-bottom-style
设置元素下边框的风格
border-bottom-width
设置元素下边框的宽度
宽度，颜色，风格
border-left
设置元素左边框的宽度、颜色或风格
border-right
设置元素右边框的宽度、颜色或风格
border-top
设置元素上边框的宽度、颜色或风格
border-bottom
设置元素下边框的宽度、颜色或风格
盒子模型
盒子模型用于处理元素内容
、内边距、边距和外边距
、内边距、边距和外边距
padding：内边距
padding：设置内边距
padding-left：设置左边距
padding-right：设置右内边距
padding-top：设置上内边距
padding-bottom：设置下内边距
margin：外边距
margin：设置元素的外边距
margin-left：设置元素的左外边距
margin -right：设置元素的右外边距
margin -top：设置元素的上外边距
margin -bottom：设置元素的下外边距
定位属性
定位类型
绝对定位
浮动定位
固定定位
相对定位
CSS定位属性
position
absolute（绝对定位）
relative（相对定位）
fixed（固定定位）
left
指定元素左上角的横坐标
top
指定元素左上角的纵坐标
如何编写CSS
1.在style中编写
<style>
div {
color:blue;
}
</style>
div {
color:blue;
}
</style>
2.引入外部css文件
<link rel='stylesheet' href='css/test.css'/
3.在元素的style属性中编写
<div style="font-size:14px color：red">
css注释
CSS的注释：/*注释的内容*/
css选择器
标签选择器
target_name{
样式列表
}
样式列表
}
类选择器
. class_name{
样式列表
}
样式列表
}
ID选择器
#ID class_name{
样式列表
}
样式列表
}
选择器的优先级：
ID选择器的优先级比Class选择器的优先级高，而Class选择器比标签选择器的优先级高。
组合选择器
交集选择器
选择器1 选择器2{
样式列表
}
样式列表
}
交集选择器就是对选择器1中的选择器2进行样式化
并集选择器
选择器1, 选择器2, … {
样式列表…
}
样式列表…
}
并集选择器就是同时对多个选择器进行样式化
通用选择器
* {
样式列表…
}
样式列表…
}
通用选择器就是对所有元素进行样式化
注意：通用选择器的优先级最低
伪类选择器
对元素处于某一个特定状态进行样式化
:link
未访问状态，只对a标签有效
:visited
已访问状态，只对a标签有效
:hover
鼠标划过时候的状态
:active
鼠标选定时候的状态
0 条评论
下一页
