css的使用方法

  <link rel="stylesheet" href="../../css/first.css">

<!--引入css文件,相当于把所有的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;........................................................................................../*溢出文本的处理:显示省略号*/

  

猜你喜欢

转载自blog.csdn.net/tjy1214/article/details/81230667
今日推荐