选择器:基础选择器,复合选择器
基础选择器:标签选择器,类选择器,id选择器,通配符选择器
标签选择器:
标签名属性1:{
属性值1;属性2:属性值2;属性3:属性值3;
}
类选择器:
.类名{
属性1:属性值1;
...
}
结构需要用class属性来调用class类的意思
<div class = “red”>变红色</div>
id选择器:
#id名{
属性1:属性值1;
}
与类选择器的区别:只能调用一次,别人切勿使用。
例子:类选择器相当于身份证里的名字
id选择器相当于身份证号码
通配符选择器:
使用*定义,它表示选取页面中所有元素(标签)
*{
属性1:属性值1;
...
}
基础选择器总结:
字体粗细:font-weight
400为正常,700为变粗
font-size:normal;默认值,浏览器会显示标准的字体样式,可以将斜体em,i改为不倾斜字体。
字体复合属性:
font:font-style font-weight font-size/line-height font-family;
注意:不能更换顺序,空格隔开,不需要的属性可以省略,但必须保留font-size和font-family属性,否则font属性不起作用。
装饰文本:text-decoration:
none 默认。没有装饰线(最常用)
underline 下划线。链接a自带下划线(常用)
overline 上滑线(几乎不用)
line-through 删除线(不常用)
文本缩进:text-indent —— 段落首行缩进(2em二个字的距离)
行间距:line-height

css的引入方式:
内部样式表
行内样式表
外部样式表:

css复合选择器
包括:后代选择器,子选择器,并集选择器,伪类选择器等等
后代选择器:
子元素选择器:

并集选择器:

伪类选择器包括链接伪类,结构伪类等
链接伪类:
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
注意:为了确保生效,请按照LVHA的顺序声明;a链接在浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式
:focus 伪类选择器:
用于选取获得焦点的表单元素,焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要是针对于表单元素来说。
CSS的元素显示模式:
元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>
html元素分为块元素和行内元素二种类型
常见的块元素<h1>~<h6> <p> <div> <ul> <ol> <li>
块元素特点:
1.比较霸道,自己独占一行。
2.高度,宽度,外边距以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面可以放行内或者块级元素
注意:文字类的元素内不能使用块级元素
<p>标签主要用于存放文字,因此<p>里面不能放块级元素,特别是不能放<div>
同理,<h1>~<h6>等都是文字类块级标签,里面也不能放其他块级元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等,span最典型,有的地方也称内联元素
行内元素的特点:
1.相邻行内元素在一行上,一行可以显示多个
2.高,宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或者其他行内元素
注意:链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全
行内块元素:在行内块元素中有几个特殊的标签:
<img/> <input> <td> 它们同时具有块元素和行内元素的特点
行内块元素的特点:
1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个
2.默认宽度就是它本身内容的宽度
3.高度,行高,外边距以及内边距都可以控制
css的元素显示模式
块级元素和行内元素的互转:
转化为块级元素:display:block;
转换为行内元素:diaplay:inline