一、CSS简介
1、什么是CSS。
css是层叠样式表(Cascading Style Sheets)的简称,也称css样式表或级联样式表。
css同html一样是一种标记语言。css主要用来设置html页面中文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
css作用:使结构和样式相分离。
2、css语法规范。
css规则由两个主要部分构成:选择器及一条或多条声明。
空格规范:属性值前面,冒号后面保留一个空格;选择器和大括号中间保留空格。
3、html引用css方式。
二、CSS选择器
选择器分为基础选择器和复合选择器两大类。
基础选择器是由单个选择器组成。
基础选择器包括标签选择器、类选择器、id选择器、通配符选择器。
1、标签选择器
是指用html标签名称作为选择器。
作用:可以把某一类标签全部选出来,比如所有的div和span标签。
优点:快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。
2、类选择器
差异化选择不同标签,单选一个或几个标签。
长名称或词组可以用横线为选择器命名。
不要使用纯数字、中文命名,尽量使用英文字母表示。
命名要有意义。
类选择器多类名使用:class=“red font35”
3、id选择器
为标有特定id的html元素指定特定样式。
id属性只在每个html中出现一次,即只能调用一次。
4、通配符选择器
用*定义,表示选取页面中所有标签。
不需要调用,自动给所有元素使用样式。
三、CSS字体属性
1、font-size: 定义字体大小
2、font-family: 字体类型
3、font-weight: 字体的粗细(normal正常、bold粗体、bolder特粗体、lighter细体、number数字)
*400等同于normal,700等同于bold,数字后面不跟单位。
4、font-style: 文本风格(normal、italic斜体)
多用于给斜体标签(em,i)改为不倾斜字体
5、复合属性
p {
/* 复合属性,简化代码 */
/* font: font-style font-weight font-size/line-height font-family */
font: italic 700 16px "楷体";
}
注意:顺序不能变;不需要的可省略,但必须保留font-size和font-family属性,否则font不起作用。
四、CSS文本属性
text(文本)属性定义文本的外观,如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、color
2、text-align设置水平对齐方式。(left right center)
3、text-decoration添加文本修饰。
4、text-indent设置段落的首行缩进。
单位:px和em(相对单位,1em=一个文字大小)
5、text-height设置行间距。
五、element语法
提高html/css的编写速度
1、快速生成html结构语法
1)生成标签,直接输入标签名后按tab键即可。如div后tab生成
<div></div>
2)生成多个相同标签,加上即可。如div3快速生成3个div
3)父子级别关系的标签,用>即可。如ul>li
4)兄弟关系标签,用+。如div+p
5)生成类名或者id名字的,直接写.demo或#two tab即可。
<div id="two"></div>
6)生成div类名有顺序,用自增符号$
7)生成标签内部写内容,用{}。
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!-- div{$}*3 -->
<div>1</div>
<div>2</div>
<div>3</div>
2、快速生成css样式语法
css基本采取简写形式。
w100 按tab生成 width: 100px;
lh20 按tab生成line-height: 20px;
3、快速格式化代码shift+alt+f
五、复合选择器
CSS中,根据选择器类型把选择器分为基础选择器和复合选择器,复合选择器建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器由两个或多个基础选择器通过不同方式组合而成。
常用复合选择器:后代选择器、子选择器、并集选择器、伪类选择器等。
5.1、后代选择器
可选择父元素里面的子元素。写法:外层标签写在外面,内层标签写在后面。
ul li {样式声明} //选择ul里面所有li元素
5.2、子选择器
只能作为某元素最近一级子元素。
语法:元素1>元素2{样式声明}
如:
div>p {样式声明} //选择div 里面所有最近一级p标签元素
5.3、并集选择器
可以选择多组标签,同时为他们定义相同的样式。
任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2 {样式声明}例子:
ul,div { 样式声明} //选择ul和div 标签元素
5.4、伪类选择器
向某些伪类选择器添加特殊效果,比如给链接添加特殊效果。
用冒号表示
5.4.1链接伪类
a:link //选择所有未被访问的链接
a:visited //已被访问的链接
a:hover //选择鼠标指针位于其上的链接
a:active //选择活动链接(鼠标按下未弹起的链接)
注意事项:
1)按照LVHA顺序声明:link、:visited、 :hover、:active
\2)a链接在浏览器中具有默认样式,所有在工作中要给链接单独指定样式。
5.4.2 :focus伪类选择器
选取获得焦点(光标)的表单元素,一般是类表单元素才能获取,这个选择器主要针对表单元素。
input:focus {
background-color:red;
}
六、元素显示模式
元素(标签)以什么方式进行显示,比如div自己占一行,一行可放多个span.
HTML元素分为块元素和行内元素两类。
6.1块元素
常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
块元素特点:
1)自己独占一行
2)高度、宽度、外边距以及内边距都可以控制。
3)宽度默认是容器(父级宽度)100%。
4)是一个容器及盒子,里面可以放行内或块级元素。
注意:
文字类的元素内不能使用块级元素。
p标签主要用于存放文字,p里面不能放块级元素。
6.2行内元素
常用的:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
特点:
1)一行可显示多个
2)宽、高直接设置时无效的。
3)默认宽度是他本身内容的宽度。
4)行内元素只能容纳文本或其他行内元素。
注意:
链接里面不能再放链接
特殊情况<a>
里可以放块级元素,但是给a转换一下块级模式最安全。
6.3行内块元素
在行内元素中几个特殊标签<img />、<input />、<td>
,他们同时具有行内元素和块内元素的特点。
一行可放多个行元素、可设置宽度高度,默认内容长度。
行内元素转块级元素:display: block;
块级元素转换为行内元素:display: inline;
转为行内块元素:display:inline-block;
七、CSS背景
背景颜色background-color:颜色值
,默认transparent(透明)
背景图片background-image:none或url()
背景平铺background-repeat: repeat(纵向和横向)|no-repeat|repeat-x|repeat-y
背景位置background-position: x y;,精确定位:第一个是x坐标,第二个是y坐标,若指定一个数值,一定是坐标,另一个默认垂直居中。方位定位:两个值前后顺序无关,如left top和top left效果一致。