css的使用方法

 

行内样式：

缺点：1.内容和样式没有分离。

           2.样式没有复用性，仅作用于当前一个样式

优点：1.写法简单，适用范围广

           2.优先级高

内部样式：

缺点：1.样式和内容没有完全分离，样式在多个页面间不能复用

优点：1.可以实现样式复用，但是复用程度不高，不能在多个页面之间复用

外部样式：

缺点：1.编辑css的时候需要频繁切换

优点：1.html和css的完全分离

           2.css得到了最大程度的复用

样式优先级的比较

在正常的引入顺序下（先引入外部的，再引入内部的）

    优先级（就近原则）的顺序为：

    行内样式>内部样式>外部样式

宽高属性

1.块级元素

所有的块级元素对宽高都有效

2.行级元素

所有的行级元素对宽高设置都无效

但是存在特殊元素： img   input   textarea   select

文本样式

opacity: 1;......................................................................................................... /*1不透明，0全透明*/

font-weight:bold;................................................................................................/*字体粗细*/

font-size: 40px;................................................................................................../*字体大小*/

font-family:宋体 微软雅黑 sans-serif;................................................................/*字体系列*/

font-style: italic;................................................................................................./*字体样式(斜体）*/

/*复合属性（注意顺序）：等效前五个属性（复合属性效率高）*/

font: italic,bold, 40px/1.5 ,宋体 ,微软雅黑 ,sans-serif;

height: 30px;...................................................................................................../*高度*/

background-color: red;...................................................................................../*背景颜色*/

text-align: center;............................................................................................./*文本水平对齐方式*/

line-height: 30px;............................................................................................./*行高，通常用来设置文本垂直方向的对齐方式*/

letter-spacing: 10px;......................................................................................../*文本间距*/

 

overline.........................................................................................................上划线

underline.........................................................................................................下划线

line-through.........................................................................................................中划线

 

text-decoration: overline;................................................................................./*文本修饰*/

 

wavy............................................................................................................波浪线

dashed.........................................................................................................（间隔）短横线

dotted.........................................................................................................点状线

solid.........................................................................................................单实线

double.........................................................................................................双实线

 

text-decoration-style: dashed;............................................................................./*文本修饰的样式*/

text-decoration-color: #cccccc;.........................................................................../*文本修饰的颜色*/

text-indent: 2em;................................................................................................./*文本缩进*/

white-space: nowrap;........................................................................................../*文本换行的处理：不折行*/

overflow: hidden;................................................................................................./*溢出部分的处理：隐藏*/

text-overflow: ellipsis;........................................................................................../*溢出文本的处理：显示省略号*/

 

css的变形效果

border-radius: 10px 20px 30px 40px;..................................................................../*圆角(值: 左上，右上，右下，左下)*/

transform:translateY(50px);............................................................................../*元素的平移*/

transform: scale(1.5);......................................................................................../*元素的缩放倍数*/

transform: rotate(90deg);......................................................................................../*元素的旋转角度*/

transform: skew(45deg);......................................................................................./*元素的倾斜效果*/

transition: all 2s ease;......................................................................................./*元素的过渡效果*/

（x轴的偏移 y轴的偏移 模糊程度 模糊范围 阴影颜色）

box-shadow: 3px 5px 10px 10px greenyellow;................................................../*box阴影*/