文字相关属性:

文字大小:

 

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问题