CSS语言基础
CSS概述
CSS基本语法结构
样式是CSS的基本单元,每个样式包含两部分内容:
- 选择器
- 声明:由属性和属性值构成以(;)结束
属性 : 值 属性 : 值
div {color:blue;font-size:12px;}
选择器 声明 声明
注释:/* 注释内容 */
CSS的使用
内嵌样式
也叫行内样式
<p style="color:red;background:yellow;">内嵌样式-style属性</p>
内部样式表
<head>
<style type="text/css">
h1{
color:#033;
border:dashed 1px #6600CC;
}
hr{
width:95%;
text-align:center;
color:#03C;
}
span{
font-weight:bold;
}
</style>
</head>
外部样式表
分为:
- 链接外部样式表
- 导入外部样式表
-
链接外部样式表
<link type="text/css" rel="stylesheet" href="url" />
<link>为单标签
属性 描述 type 设置链接目标文件的MIME类型,CSS的为text/css rel 设置链接目标文件与当前文件的关系,stylesheet表示为CSS href URL地址 -
导入外部样式表
@import url("css/style.css");
链接与导入两种方式的区别 | 描述 |
---|---|
隶属关系不同 | <link>标签属于HTML,@import属于CSS提供的加载方式 <link>还可以引入其他类型的文件,@import只能载入CSS样式 |
加载时间及顺序不同 | <link>先将CSS文件加载到网页中,再进行编译 @import先将HTML结构呈现出来,在把外部CSS加载到网页中 |
兼容性不同 | @import低版本不能识别,<link>没问题 |
DOM模型控制样式 | 使用JavaScript控制DOM改变样式时,只能使用<link>标签 而@import不受DOM模型控制 |
样式表的优先级
就近原则:内嵌 --> 内部 --> 外部 --> 浏览器缺省默认
CSS选择器
基本选择器
分为:
- 通用选择器
- 标签选择器
- 类选择器
- ID选择器
-
通用选择器(*)
*{font-size:12px;color:red;}
-
标签选择器
p{font-size:楷体;}
-
类选择器(.)
.classname{property1:value;...} <div class="classname">...</div>
-
ID选择器(#)
#myId{ color:red; text-decoration:line-through; } <p id="myId">...</p>
ID选择器有一定局限性,尽量少用。
优先级:ID选择器 --> 类选择器 --> 标签选择器 --> 通用选择器
组合选择器
分为:
- 多元素选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 普通兄弟选择器
-
多元素选择器(,)
p,div{font-size:14px;color:blue;}
-
后代选择器( )
p div{background-color:#CCC;}
-
子选择器(>)
选取直接子元素
div>p{ font-weight:bold; border:solid 2px #066; }
-
相邻兄弟选择器(+)
紧接某元素之后的兄弟元素
h3+p{font-weight:bold;}
-
普通兄弟选择器(~)
h3~p{background:#CCC;}
属性选择器
分为:
- 存在选择器
- 相等选择器
- 包含选择器
- 连接字符选择器
- 前缀选择器
- 子串选择器
- 后缀选择器
选择器类型 | 语法 | 实例 | 描述 |
---|---|---|---|
存在选择器 | [attribute] | p[id] | 任何带id属性的<p>标签 |
相等选择器 | [attribute=value] | p[name=“teaName”] | name属性为“teaName”的<p>标签 |
包含选择器 | [attribute~=value] | p[name~=“stu”] | name属性包含“stu”单词,并与其他 内容通过空格隔开的<p>标签 |
连字符选择器 | [attribute|=value] | p[lang|=“zh”] | 匹配属性等于zh或以zh开头的所有元素 |
前缀选择器 | [attribute^=value] | p[title^=“zh”] | 选择title属性值以“zh”开头的所有元素 |
子串选择器 | [attribute*=value] | p[title*=“ch”] | 选择title属性包含“ch”字符串的所有元素 |
后缀选择器 | [attribute$=value] | p[title$=“th”] | 选择title属性值以“th”结尾的所有元素 |
CSS样式属性
文本属性
用于控制文本的格式化
功能 | 属性名 | 描述 |
---|---|---|
缩进文本 | text-indent | 设置行的缩进大小,值可以为正和负值,单位可以用em,px,百分比 |
水平对齐 | text-align | 设置文本的水平对齐方式,取值为left,right,center,justify |
垂直对齐 | vertical-align | 设置文本的垂直对齐方式,取值为bottom,top,middle,baseline |
字间距 | word-spacing | 设置单词之间的标准间隔,默认normal(或0) |
字母间隔 | letter-spacing | 设置字符或字母大小的间隔 |
字符转换 | text-transform | 设置文本中字母的大小写,取值为none,uppercase,lowercase, capitalize |
文本修饰 | text-decoration | 设置段落中需要强调的文字,取值为none,underline,overline (上划线),line-through(删除线),blink(闪烁) |
空白字符 | white-space | 设置源文档中的多余的空白,取值为normal(忽略多余),pre (正常显示),nowrap(文本不换行,除非遇到<br/>标签) |
字体属性
功能 | 属性名 | 描述 |
---|---|---|
文本颜色 | color | 颜色。例如red,rgb(255,0,0),#FF0000 |
字体类型 | font-family | 字体。取值为宋体,隶书,Serif,Verdana等 |
字体风格 | font-style | 字体样式。取值为normal,italic(斜体),oblique(倾斜),两者一样 |
字体变形 | font-variant | 设定小型大写字母。取值为normal,small-caps(小型大写字母) |
字体加粗 | font-weight | 字体粗细。取值为bolder(特粗),bold(粗体),normal,lighter (细体)或者100~900之间的9个等级 |
字体大小 | font-size | 字体大小。绝对值:xx-small,x-small,small,medium(默认), large,x-large,xx-large。相对值:单位可以是pt,em,百分比 |
行间距 | line-height | 文本的行高(两行文本基线的距离) |
字体简写 | font | 一次设置两个或更多方面,顺序为font-style,font-variant, font-weight,font-size/line-height,font-family |
背景属性
功能 | 属性名 | 描述 |
---|---|---|
背景颜色 | background-color | 设置元素的背景色 |
背景图像 | background-image | 背景图像。例如“background-image:url(bg.jpg);”, 没有图像为none |
背景重复 | background-repeat | 平铺的方式。取值为no-repeat,repeat-x,repeat-y,repeat |
背景定位 | background-position | 背景的位置。取值为top,bottom,left,right,center或 具体值(10px)或百分比 |
背景关联 | background-attachment | 设置背景是否随页面滚动。取值为scroll(默认),fixed(固定) |
背景尺寸 | background-size | 背景尺寸,取值为像素或百分比 |
填充区域 | background-origin | 规定background-position相对于什么位置。取值为 border-box,padding-box,content-box |
绘制区域 | background-clip | 规定背景的绘制区域。取值为booder-box,padding-box content-box |
背景简写 | background | 可以设置:background-color,background-position, background-size, background-repeat, background-origin background-clip, background-attachment, background-image |
表格属性
功能 | 属性名 | 描述 |
---|---|---|
边框 | border | 边框的宽度 |
折叠边框 | border-collapse | 是否边框折叠为单一边框。取值为separate(双边框,默认) collapse(单边框) |
宽度 | width | 表格宽度。取值为像素或百分比 |
高度 | height | 表格高度。取值为像素或百分比 |
水平对齐 | text-align | 水平对齐方式。取值为左对齐,右对齐,居中 |
垂直对齐 | vertical-align | 垂直对齐方式。取值为顶部对齐,底部对齐,居中对齐 |
内边框 | padding | 内容与边框的距离 |
单元格间距 | border-spacing | 相邻单元格的边框间的距离。仅用于双边框模式 |
标题位置 | caption-side | 标题位置。取值为top,bottom |
列表属性
功能 | 属性名 | 描述 |
---|---|---|
列表类型 | list-style-type | 设置列表的图像符号。取值为none,disc(默认,实心圆), circle(空心圆),square(实心方块),decimal(数字), lower-roman(小写罗马),upper-roman(大写罗马), lower-latin(小写拉丁文字母),upper-latin(大写拉丁文字母) |
列表项图像 | list-style-image | 指定图像。例如:list-style-image:url(xxx.gif) |
符号位置 | list-style-position | 图形符号的位置。取值为inside(换行需要参考标志的位置), outside(默认,换行时,无需参考标志的位置) |
列表简写 | list-style | 顺序为list-style-type,list-style-position,list-style-image |
分类属性
分为:
- cursor
- display
- visibility
- position
- float
- clear
- cursor属性
用于指定用户鼠标的指针类型。
属性值 | 描述 |
---|---|
auto | 取决于悬停对象,文本显示"I",超链接显示箭头 |
crosshair | 十字线形状 |
pointer | 指示链接,手的形状 |
move | 移动选择效果 (上下左右都是箭头) |
text | 文本,类似竖线“I” |
wait | 等待形状(一个圈,在那里转) |
help | 问号或气球形状 |
ne-resize | 左下和右上箭头 |
se-resize | 左上和右下箭头 |
s-resize | 上下箭头 |
w-resize | 左右箭头 |
-
display属性
将页面元素隐藏或显示出来,也可以将元素强制改成块级元素或内联元素
属性值 描述 none 将元素设置为隐藏状态 block 显示为块级元素,元素前后会带有换行符 inline 默认,显示为内联元素,元素前后没有换行符 -
visibility属性
可以将页面隐藏,但是仍占用原来的空间。取值为:visible,hidden
-
position属性
将元素从页面流中偏移或分离出来,实现更精准的定位。
属性值 描述 static 正常流(默认) relative 相对定位。相对于其正常位置进行定位,并保持其未定位前的形状及所占的空间 absolute 绝对定位。相对于浏览器窗口进行定位,将元素框从页面流中完全删除后,
重新定位。当拖拽页面滚动条时,该元素一起滚动。fixed 固定定位。相对于浏览器窗口进行定位,将元素框从页面流中完全删除后,
重新定位。当拖拽页面滚动条时,该元素不会滚动。relative,absolute,fixed可以使用left,top,right,bottom进行重新定位(left:120px)
-
float属性
将元素从页面流中浮动出来
属性值 描述 left 元素浮动到左边界 right 元素浮动到右边界 none 默认,不浮动 -
clear属性
消除浮动所产生的影响
属性值 描述 left 清除左侧浮动产生的影响 right 清除右侧浮动产生的影响 both 清除两侧浮动产生的影响 none 默认,允许浮动元素出现在两侧
伪类与伪元素
根据元素的特殊状态来选取元素
伪类
伪类名 | 描述 |
---|---|
:active | 向被激活的元素添加样式 |
:focus | 向拥有键盘输入焦点的元素添加样式 |
:hover | 当鼠标驯服在元素上方时,添加样式 |
:link | 向未被访问的链接添加样式,仅适用于超链接 |
:visited | 向已被访问的链接添加样式,仅适用于超链接 |
:readonly | 向只读元素添加样式 |
:checked | 向被选中的元素添加样式 |
:disabled | 向被禁用的元素添加样式 |
:enabled | 向可用的元素添加样式 |
伪元素
表示某元素的部分内容,虽然逻辑上存在,但在DOM数中国不存在对应部分
伪元素 | 描述 |
---|---|
:first-line | 向文本的首行添加特殊样式 |
:first-letter | 向文本的第一个字母或汉字添加特殊样式 |
:before | 在元素之前添加内容 |
:after | 在元素之后添加内容 |
CSS页面布局
盒子模型
由内容(content),内边距(padding),边框(border),外边距(margin)组成。
┌──────────────────────────────────────────────────────────────┐
│ margin │
│ ┌==================================================┐ |
| │ | |
| │ ┌======================================┐ | |
| │ | padding | | |
| │ | ┌--------------------------┐ │ | |
| | | | | | | |
| | | | content | | | |
| | | | | | | |
| | | └--------------------------┘ | | |
| | | | | |
| | └======================================┘ | |
│ | border | |
│ └==================================================┘ |
| |
└──────────────────────────────────────────────────────────────┘
内容区
盒子模型的中心(content),包含盒子的主要信息内容
属性 | 描述 |
---|---|
width | 宽度 |
height | 高度 |
overflow | 内容太多,溢出内容的处理方式 |
overflow值 | 描述 |
---|---|
visible | 默认值,溢出值不会被修剪,呈现在元素框之外 |
hidden | 溢出的内容将不可见 |
scroll | 溢出的内容会被修剪,但是可以通过滚动条查看 |
auto | 由浏览器决定如何处理 |
边框
围绕内容和内边距的一条或多条线
属性 | 描述 |
---|---|
border-top-width | 上边框的宽度,取值为thick,2px |
border-top-style | 上边框的样式,取值为double,dotted |
border-top-color | 上边框的颜色,取值为#ff0000 |
border-top | 简写形式,顺序为:border-top-width,border-top-style,border-top-color |
border-right-width | 右边框的宽度 |
border-right-style | 右边框的样式 |
border-right-color | 右边框的颜色 |
border-right | 简写,顺序为:border-right-width,border-right-style,border-right-color |
border-bottom-width | 下边框的宽度 |
border-bottom-style | 下边框的样式 |
border-bottom-color | 下边框的颜色 |
border-bottom | 顺序为:border-bottom-width,border-bottom-style,border-bottom-color |
border-left-width | 左边框的宽度 |
border-left-style | 左边框的样式 |
border-left-color | 左边框的颜色 |
border-left | 顺序为:border-left-width,border-left-style,border-left-color |
border-width | 边框宽度的简写,设置所有宽度 |
border-style | 边框样式的简写,设置所有样式 |
border-color | 边框颜色的简写,设置所有颜色 |
border | 边框的简写 |
CSS3新增 | |
border-top-left-radius | 设置左上角圆角边框 |
border-top-right-radius | 设置右上角圆角边框 |
border-bottom- left-radius | 设置左下角圆角边框 |
border-bottom- right-radius | 设置右下角圆角边框 |
border-radius | 圆角边框的简写 |
box-shadow | 向框添加一个或多个阴影 |
边框宽度
参数的个数 | 顺序 |
---|---|
4个参数值 | 上,右,下,左 |
3个参数值 | 上,左+右,下 |
2个参数 | 上+下,左+右 |
1个参数 | 四个方向取值相同 |
取值为thick(粗边框)
边框样式
值 | 描述 |
---|---|
none | 无边框 |
hidden | 隐藏边框 |
dotted | 点状边框,大多数浏览器呈现实线 |
dashed | 虚线,大多数浏览器呈现实线 |
solid | 实线 |
double | 双线,宽度等于border-width |
groove | 3D凹槽边框,效果取决于border-color的值 |
ridge | 3D菱形边框,效果取决于border-color的值 |
inset | 3D凹边,效果取决于border-color的值 |
outset | 3D凸边,效果取决于border-color的值 |
圆角边框
属性 | 描述 |
---|---|
border-top-left-radius | 左上角圆弧 |
border-top-right-radius | 右上角 |
border-bottom-left-radius | 左下角 |
border-bottom-right-radius | 右下角 |
HR水平半径,VR垂直半径
分为:
-
水平半径与垂直半径相等
-
一个参数
border-radius:10px
-
两个参数
border-radius:10px 20px
左上和右下为10px,右上和左下为20px
-
三个参数
border-radius:10px 20px 30px
左上为10px,右上和左下为20px,右下为30px
-
四个参数
border-radius:10px 20px 30px 40px
左上为10px,右上为20px,右下为30px,左下为40px
-
-
水平半径与垂直半径不相等
需要用斜线(/)隔开
-
一个水平和一个垂直
border-radius:10px/20px /* 水平/垂直 */
-
两个水平和两个垂直
border-radius:10px 30px/20px 40px /* 水平1 水平2/垂直1 垂直2 */
左上和右下 水平半径为10px,垂直半径为20px
右上和左下 水平半径为30px,垂直半径为40px
-
三个水平和两个垂直
border-radius:10px 20px 30px/50px 60px /* 水平1 水平2 水平3/垂直1 垂直2/
左上 水平半径为10px,垂直半径为50px
右上 水平半径为20px,垂直半径为60px
右下 水平半径为30px,垂直半径为50px
左下 水平半径为20px,垂直半径为50px
-
两个水平和四个垂直
border-radius:10px 20px/30px 40px 50px 60px /* 水平1 水平2/垂直1 垂直2 垂直3 垂直4 */
左上 水平半径为10px,垂直半径为30px
右上 水平半径为20px,垂直半径为40px
右下 水平半径为10px,垂直半径为50px
左下 水平半径为20px,垂直半径为60px
-
边框阴影
添加一个或多个阴影(box-shadow)
属性 | 描述 |
---|---|
h-shadow | 必需,指定水平阴影的位置,允许负值 |
v-shadow | 必需,指定垂直阴影的位置,允许负值 |
blur | 指定模糊距离 |
spread | 指定阴影的尺寸 |
color | 指定阴影的颜色 |
inset | 将外部阴影(outset)改为内部阴影 |
图像边框
当元素长度或者发生变化时,可以使用一个图像对边框进行绘制
属性 | 描述 |
---|---|
border-image-source | 图像路径,取值为none(没有边框图像),url() |
border-image-slice | 图像边框内向偏移,对图像进行切割,取值为1~4个参数,百分数 |
border-image-width | 宽度 |
border-image-repeat | 是否平铺覆盖(repeat),取整平铺(round),拉伸覆盖(stretch) |
border-image | 简写 |
-
边框背景的分割
border-image-slice在逻辑上对图像进行分割。
border-image-slice:10 20 30 40 fill;
-
边框背景的使用
border-image:url(图像的路径) 图像分割方式(slice)/图像边框宽度(width) 图像的平铺方式(repeat)
-
中心区的fill填充
border-image:url("images/borderImage2.jpg") 40 fill/40px stretch;
内边距
内容区与边框之间的距离(padding)
属性 | 描述 |
---|---|
padding-top | 上面的内边距 |
padding-right | 右边的内边距 |
padding-bottom | 下面的内边距 |
padding-left | 左边的内边距 |
padding | 简写 |
外边距
元素与元素之间的距离(margin)
外边距的基本用法
属性 | 描述 |
---|---|
margin-top | 上面的外边距,取值为px,auto |
margin-right | 右边的外边距 |
margin-bottom | 下面的外边距 |
margin-left | 左边的外边距 |
margin | 简写 |
外边距合并
当两个外边距相遇时,会形成一个外边距,取值为前面两个中较大的
-
上下元素间的外边距合并
-
包含元素间的外边距合并
父元素没有内边距和边框,且子元素没有外边距,父元素和子元素的上下边距也会合并
-
空元素的外边距合并
空元素只包含外边距而无边框和填充时,上外边距和下外边距就会碰到一起,合并。
DIV+CSS页面布局
实现结构与外观相分离。
常见的布局方式:
-
表格布局
-
框架布局
-
DIV+CSS
要求页面分为五部分:
- 横幅(banner)
- 导航(navigator)
- 焦点内容(focus)
- 主题内容(content)
- 版权(footer)