文章目录
1. CSS选择器
1.基础选择器
基础选择符就是ID,标签,类选择符那些
2.复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
3.交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格
如h3.special。
记忆技巧:
交集选择器是并且的意思。 即…又…的意思
比如:p.one选择的是类名为.one的段落标签。
4.并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
记忆技巧:
并集选择器是和的意思,就是说,只要逗号隔开的,所有选择器都会执行后面样式。
比如:
.one, p, #test{color: #F00;}表示.one和p和#test这三个选择器都会执行颜色为红色。通常用于集体声明。
5.后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说,它能选择任何包含在内的标签。
6.子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
进行连接,注意,符号左右两侧各保留一个空格。
白话:这里的子,指的是亲儿子,不包含孙子、重孙子之类。
比如:.demo > h3 {color: red;}说明h3一定是demo亲儿子。demo元素包含着h3。
在不修改以上代码的前提下,完成以下任务:
1.链接登录的颜色为红色,同时主导航栏里面的所有的链接改为橙色 (简单)
2.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。(中等)
3.主导航栏里面的一级菜单链接文字颜色为绿色。(难)
7.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第n个元素。
为了和我们刚才学的类选择器相区别,类选择器是一个点
比如: .demo{}而我们的伪类用2个点就是冒号。比如:link{}
链接伪类选择器
-
:link /* 未访问的链接 */
-
:visited /* 已访问的链接 */
-
:hover /* 鼠标移动到链接上 */
-
:active /* 选定的链接 */
注意写的时候,他们的顺序尽量不要颠倒,按照lvha 的顺序。
a {/* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover {/* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
2. 标签显示模式
标签的类型(显示模式)。HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。
具体如下:
1.块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中
标签是最典型的块元素。
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
2.行内元素(inline-level)
行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中标签最典型的行内元素。
行内元素的特点:
(
1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。(a特殊a里面可以放块级元素)
注意:
只有文字才能组成段落,因此p里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素
链接里面不能再放链接
a里面可以放块级元素
3.块级元素和行内元素区别
块级元素的特点:
(1)总是从新行开始
(2)高度,行高、外边距以及内边距都可以控制。
(3)宽度默认是容器的100%
(4)可以容纳内联元素和其他块元素。
行内元素的特点:
(1)和相邻行内元素在一行上。
(2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或则其他行内元素。
4.行内块元素(inline-block)
在行内元素中有几个特殊的标签——、、,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。
标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;
3. CSS书写规范
开始就形成良好的书写规范,是你专业化的开始。
1.空格规范
【强制】
选择器与{之间必须包含空格。
示例:.selector { }
【强制】
属性名与之后的 : 之间不允许包含空格, : 与属性值之间必须包含空格。
示例:font-size: 12px;
选择器规范
【强制】
当一个rule包含多个selector时,每个选择器声明必须独占一行。
示例:
/* good
*/
.post,
.page,
.comment
{
line-height: 1.5;
}
/* bad
*/
.post,
.page, .comment {
line-height: 1.5;
}
【建议】
选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good
*/
#username
input {}
.comment
.avatar {}
/* bad
*/
.page
.header .login #username input {}
.comment
div * {}
2.属性规范
【强制】
属性定义必须另起一行。
示例:
/* good
*/
.selector
{
margin: 0;
padding: 0;
}
/* bad
*/
.selector
{ margin: 0; padding: 0; }
【强制】
属性定义后必须以分号结尾。