文字相关属性:
文字大小:
1 <!-- 设置文字大小为12像素 -->
2 font-size:12px
浏览器默认文字大小16px
只能设置为偶数;不能设置为奇数(目前只有苹果能解析0.5像素)
单位除了px还有pt 一般来说 9pt=12px
文字颜色:
1 <!-- 设置颜色为#aabbcc -->
2 color:#aabbcc;
颜色为16进制
文字字体:
1 <!-- 设置文字字体为 字体 -->
2 font-family:"字体"
3 <!-- 简写 -->
4 font-family:"字体1,字体2,字体3";
简写 的读取顺序为 字体1 字体2 字体3
文字加粗:
1 font-weight :
2 <!-- 加粗 --> font-weight:bold/bolder/600/700/800/900
3 <!-- 加粗变常规/取消加粗 -->font-weight:normal/500/400/300
4 <!-- 字体更轻量级的变化/变细 -->font-weight:italic/200/100
文字倾斜:
1 <!-- font-style: -->
2 <!-- 倾斜 -->font-style:italic/oblique;
3 <!-- 倾斜变常规 --> font-style:normal;
行高:
1 <!-- 设置行高为12px -->
2 line-height:12px;
单文本垂直于父元素
文本属性的简写:
1 font:加粗 倾斜 文字大小/行高 "字体";
2 font:文字大小/行高 "字体";
3 font:文字大小 "字体";
小型的大写字母只针对小写英文有效:
1 font-variant:small-caps;
字间距多用于中文:
1 <!-- 字间距为10 -->
2 letter-spacing:10px;
词间距:多用于英文
1 word-spacing:20px;
首行缩进
1 text-indent:2em;
1em是一个文字的大小
他是会很根据文字大小的变化而变化的
比如文字大小为20px 那么1em=20px
如果文字大小为40px 那么1em==40px
1em默认16px 可以为负值
设置文字水平位置
1 text-align:left; 水平居于左
2 text-align:center; 水平居中
3 text-align:right; 水平居于右
4 text-align:justify; 两端对齐 <!-- 注意!!一般用于多行文本 一般用于英文 -->
该元素只能用于独占一行的元素
文本下划线修饰
1 text-decoration:none; 去除文本下划线 多用于超链接
2 text-decoration:overline; 添加上划线
3 text-decoration:line-through; 添加中划线
4 text-decoration:underline; 添加下划线
修饰文本大小
1 text-transform:lowercase; 全小写
2 text-transform:uppercase; 全大写
3 text-transform:capitalize; 首字母大写
列表样式
更改列表小圆圈样式
1 list-style-type:disc;实心圆
2 list-style-type:circle;空心圆
3 list-style-type:square;正方实体
4 list-style-type:none;去除样式
指定图片为列表样式
1 list-style-image:url(图片路径);
更改列表样式的位置
1 list-style-position:outside; 默认值
2 list-style-position:inside; 让列表位置在li内侧
列表样式的简写
去除列表样式
list-style:none;
边框
简写
border:大小 线型 颜色;
简写还可以分方向
1 border-top:1px solid #000;上边框
2 border-bottom:1px solid #000;下边框
3 border-lleft:1px solid #000;左边框
4 border-right:1px solid #000;右边框
去除边框
border:0;
边框细分大小 线型 颜色
边框大小
1 border-width:; 边框大小
2
3 可以细分四个方向
4 border-上下左右-width:;
5
边框线型
1 border-style:solid; 实线
2 border-style:dashed; 虚线
3 border-style:dotted; 点状线
4 border-style:double; 双实线
5
6 可以细分为四个方向
7 border-上下左右-style:;
边框颜色
1 border-color:; 边框颜色
2 可以细分四个方向
3 border-上下左右-color
敲一个三角形
1 div{
2 width:0px;
3 height:0;
4 border:50px solid transparent;
5 想要那里朝上的三角形
6 border-bottom-color:red;
7 此时是向上50px红色三角形}
透明颜色
1 transparent 透明色
背景属性
背景颜色
1 background-color:; 背景颜色
背景图片
1 background-image:url(图片路径);
背景图平铺
1 background-repeat:repeat; 默认值 平铺
2 background-repeat:no-repeat; 不平铺
3 background-repeat:repea-x; 延x轴平铺
4 background-repeat:repea-y; 延y轴平铺
简写
1 background-position:水平位置 垂直位置;
背景图位置设置
单独指定水平位置
1 background-position-x:left; 左
2 background-position-x:center; 中
3 background-position-x:right; 右
4 background-position-x:109px; 数值
5 background-position-x:34%; 百分比
单独指定垂直位置
1 1 background-position-y:left; 左
2 2 background-position-y:center; 中
3 3 background-position-y:right; 右
4 4 background-position-y:109px; 数值
5 5 background-position-y:34%; 百分比
背景属性简写
1 background:颜色 图片 平铺 位置;
背景图固定
1 background-attachment:scroll; 默认值 滚动
2 background-attachment:fixed; 固定
注意!!! 设置背景图固定 他是根据浏览器可视窗口来决定背景位置的!!!
CSS核心属性 三大特性
层叠性:
同等权重下 代码自上而下解析 不同权重下 听取权重较大的一方
继承性:
有一些css属性;设置在父元素或者更上层的爷爷元素等 会被里面的后代元素继承
有哪些元素可以继承?
font-开头的
colorwenziyanse
line-height行高
text-开头的
list-开头的可以继承
letter-spacing
word-spacing 可以继承
注意!!!
继承而来的权重为0!!
设置元素本身的样式 大于 继承父元素的样式
特殊性:
元素本身自带的样式大于继承而来的
让图片垂直水平居中与父元素div
1 需要给父元素div{
2 line-height:高度;
3 text-align:center;
4 }
1 需要给img{
2 vetical-align:middle;
3 }
让图片垂直对齐文字
1 vertivcal-align: baseline; 默认值基线
2 vertivcal-align: bottom; 底线
3 vertivcal-align: middle; 解决图片文字垂直对齐问题
4 vertivcal-align:top; 解决图片3px问题