CSS
Cascading Style Sheets的缩写,一般翻译为层叠样式表。
0.引入方式:
内联---priority最高
内部---第二
外部---第三
<link rel="stylesheet" href="../css/style.css" />
优先级高的会覆盖优先级低的样式。
1.基本样式
- 文本样式
text-align: 设置文本水平对齐方式,
常用值:left right center
line-height: 设置文本行高属性
text-indent: 设置文本首行缩进
text-decoration:设置文本装饰
常用属性:none 默认值:标准
underline: 设置文本下划线
overline: 设置文本上划线
line-through:设置文本删除线
letter-spacing: 设置字符间距,常用取值为3px,8px
- 字体
font-family 类型
font-size 大小
font-weight 粗细,bold(粗体),lighter(细体),normal(默认字体)
font-style 风格,常用取值:italic(斜体样式字体)、oblique(倾斜体样式字体)、normal(正常字体)
- 背景样式
background-image 背景图片 background-image: url(images/bg.png)
background-repeat 背景平铺方式 background-repeat:no-repeat
属性值
repeat 横纵向都平铺,默认值 小方块图平铺构建整体背景
repeat-x 横向平铺 细长小图实现渐变效果
repeat-y 纵向平铺 小图背景实现特殊边框
no-repeat 背景图不重复平铺 大图做背景或使用偏移量控制
background-position 背景初始位置 background-position:20px -100px(分别表示横向和纵向的位置坐标)
背景图出现的初始位置 含义
Xpos Ypos 像素值表示背景出现的位置
X% Y% 百分比表示背景出现的位置 30% 50%(垂直方向居中,水平方向偏移30%)
X方向 Y方向关键词 关键词表示背景出现的位置,水平方向的关键词有left、center、right 垂直方向的关键词有top、center、bottom 可以使用水平和垂直方向的关键词进行自由组合。例如:right top(右上角出现)
- 链接样式
/*未访问链接:红色*/
a:link{color: red;text-decoration: none;}
/*已访问链接:绿色*/
a:visited{color: green;text-decoration: none;}
/*鼠标移动到链接上:紫色*/
a:hover{color: purple;text-decoration: none;}
/*鼠标点击时:蓝色*/
a:active{color: blue;text-decoration: line-through;}
- 列表样式
none 无标记符号 list-style-type:none;
disc 实心圆,默认 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数 字 list-style-type:decimal;
image 图 像 list-style-type:url(../image/img.jpg);
- 样式浮动
float浮动属性,用于设置标签对象的浮动布局(<div>、<span>、<a>、<em>。。。)
浮动作用:通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。
float:left;/*设置左浮动,改为横向排列*/
- 表格样式
边框合并:border-collapse: collapse;
2.CSS选择器
标签选择器(也称为元素选择器)
p{ }
类选择器
.classname{ }
id选择器
#idvalue{ }
并集选择器
nav,ul,li{ }
后代选择器 作用于所有后代
nav ul li{ }
子元素选择器 作用于第一代后代
ul>li{ }
兄弟选择器
h1+#p1{ } 选得是h1的兄弟#p1, 而不是h1
伪类选择器
a:link
a:visited
a:hover
a:active
属性选择器 对带有指定属性的 HTML 元素设置样式
a[title=" "]{ }
3.CSS浮动,定位,盒子模型,div+CSS网页布局
盒子模型的四要:content(内容)、border(边框)、padding(内边距)、margin(外边距)
float即为浮动,可以使用“float:浮动方向”设置某个元素的浮动行为,该元素脱离常规的文档流,向左或右移动,
直到它的外边距碰到父元素(容器)的边框或另一个浮动元素的边框为止。
float:left 设置元素左浮动
float:right 设置元素右浮动
在实际的页面布局应用中。有时需要强制换行,避免影响页面效果,这时就需要使用clear清除浮动。
Clear:left 在左侧不允许有浮动元素
Clear:right 在右侧不允许有浮动元素
Clear:both 在左右侧均不允许有浮动元素