一,标签选择器,类选择器
- 标签选择器只能对某一大标签进行全局定义,如p,div,body
- 类选择器可对不同的标签进行差异化设计。口诀:样式点定义,结构类调用,一个或多个,开发最常用。用法:“.”(英文点号进行标识),后面紧跟自定义的类名。body中<div class=“red”>xxx</div>,style中 .red{ }。
二,div网页布局
- 多类名的使用
在class中写多个类名 <div class="red font20">xxx</div> 多个类名用空格分开,标签就具有这些类名的样式这些标签可以调用这个公共的类,然后再调用自己独有的类,从而节省css的代码,统一修改也非常方便。- id选择器
id选择器是唯一的,只能用一次。<div id="red">。用法:#red{ color: ; }
通配符选择器
选择所以的标签。*{color:red ;}
三,CSS字体属性
字 体:font-family:''微软雅黑''
字体大小:font-size: 16px
字体粗细:font-weight: bold(加粗) 或者用700表示加粗 ; normal(正常)或者400
文字样式:font-style: normal(正常) 可以将em斜体标签定义的字体变正常
*复合写法:font:normal 700 16px 微软雅黑 ;顺序不能颠倒,后两个属性必写
四,CSS文本属性
文本颜色:color: red 或者16进制颜色(开发最常见) 或者 rgb(200,0,0)
对齐文本:text-align: left ;right;center
文本装饰:text-decoration: none;underline(下划线);
文本缩进:text-indent: 20px ; 2em(当前两个文字的大小)
行间距: line-height: 26px
五,CSS样式表
内部样式表:css样式定义写在head的style里,结构标签写在body里。结构样式相分离,但 仍然镶嵌在HTML里。
行内样式表:适合简单样式修改,直接在标签内部的style属性修改。
<div style="color:red;font-size:12px;">xx</div>
外部样式表:大项目最常用。样式单独写css文件,之后将css文件引入进html页面。
用法:新建css文件,命名style.css。引用:<link rel="stylesheet" href="style.css">
六,块元素,行内元素,行内块元素
块元素特点:默认独占一行, 但长宽高都可以通过定义控制。是一个容器,可以放块级元素。文字类元素不能使用块级元素。
行内元素:<a>,<span>,<strong>,<em>...默认是他本身宽度,一行可以有多个行内元素,内部可以放行内元素。
行内块元素:兼有块元素和行内元素。<img>,<text>...
元素模式转换:转换行内元素:display: inline
转换块元素:display:block;
转换行内块:display:inline-block;