如果我们把HTML比喻成一个人那么css就是化妆技术,
HTML+css就是一个人掌握了美貌可想而知css是多么的重要
下面我们一起复习css基础知识
标签之间的关系
祖先元素:直接或间接包含后代元素的元素。
后代元素:直接或间接被祖先元素包含的元素。
父元素:直接包含子元素的元素。
子元素:直接被父元素包含的元素。
兄弟元素:拥有相同父元素的元素。
meta标签属性补充
使用前提:目前几乎所有的搜索引擎都使用网络机器人自动查找页面中meta值来给网页分类
使用场景1
<meta name="keywords" content="牙疼怎么办,智齿是什么,拔牙多少钱,矫正多少钱,九院医生,北大口腔,瑞尔口腔,拜耳口腔">
注意 为搜索引擎提供的关键字列表。 各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。
使用场景2
<meta name="description" content="有牙齿问题,找河马牙医,儿童口腔,全国儿童口腔在线咨询,牙疼怎么办,拔牙多少钱,矫正多少钱,种植牙,有牙齿问题">
注意 用来告诉搜索引擎你的网站主要内容。
使用场景3
<meta name="renderer" content="webkit" />
注意 优先以webkit内核渲染页面
清楚默认外边距
默认的一些标签会在标签外面有边距
在开发时一般都会把边框给设置为0, 自己去控制标签之间的距离
常用的标签边距
内边距:padding
外边距:margin
background详解
background-color 规定要使用的背景颜色,一般用(字母,颜色十六进制,rgb)
background-image 规定要使用的背景图像。url(‘URL(指向图像的路径。)’)
none(默认值。不显示背景图像。)
background-size 规定背景图片的尺寸。
background-size:100px 100px;(
1.设置背景图像的高度和宽度。
2.第一个值设置宽度,第二个值设置高度。
3.如果只设置一个值,则第二个值会被设置为 “auto”。
),
background-size:200px;
background-size:50%;
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 “auto”。
background-size:100% 100%;
background-size:cover;
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-repeat : 规定如何重复背景图像。
repeat:默认。背景图像将在垂直方向和水平方向重复。
repeat-x: 背景图像将在水平方向重复。
repeat-y: 背景图像将在垂直方向重复。
no-repeat: 背景图像将仅显示一次。
background-position 规定背景图像的位置。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
background-origin 规定背景图片的定位区域。
padding-box: 背景图像相对于内边距框来定位。
border-box: 背景图像相对于边框盒来定位。
content-box: 背景图像相对于内容框来定位。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
属性连写
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
css样式
CSS 指层叠样式表 (Cascading Style Sheets)
作用:
它是用来美化网页用的
HTML代码是用来构建网页整体布局
CSS则是用来美化网页。两者缺一不可
建房子需要用钢筋水泥(HTML代码)把房子整体架构建好,
涂料之类的(CSS代码)就是用来装饰房子的
基础语法
一条或多条声明
h1{color:red;}
多重声明
h1{
color:blue;
text-align:center;
}
CSS样式简介
行内样式: (内联样式)直接在标签的style属性中书写
页内样式: 在本网页的style标签中书写
外部样式: 在单独的CSS文件中书写,然后在网页中用link标签引用
选择器
什么是选择器?
选择器就是对指定的标签设置样式,要把指定的标签选择出来
通用选择器
通用选择器,可以同时选中页面中的所有元素。
语法:
*{ }
类选择器
类选择器以一个点号显示
.center {text-align: center}
只要有同一类名的class都会被选择
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
<p id="red">这个段落是红色。</p>
#red {color:red;}
#sidebar p{}
复合选择器
可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素。
语法
选择器1选择器2{}
例如: div.box1会选中页面中具有box1这个class的div元素。
群组选择器
群组选择器,可以同时使用多个选择器,多个选择器将被同时应用指定的样式。
语法:
选择器1,选择器2,选择器3 { }
比如: div,.test1,#box会同时选中页面中div元素,class为test1的元素,id为box的元素。
后代选择器
后代选择器可以根据标签的关系,为处在元素内部的后代元素设置样式。
语法:
祖先元素 后代元素 后代元素 { }
比如: div p{}就会选中页面中所有的div元素内的p元素。
直接后代选择器
语法:
父元素 > 子元素 {}
兄弟选择器
除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
属性选择器
属性选择器可以挑选带有特殊属性的标签
语法:
[属性名]
[属性名=“属性值”]
[属性名~=“属性值”]
[属性名|=“属性值”]
[属性名^=“属性值”]
[属性名$=“属性值”]
[属性名*=“属性值”]
伪类和伪元素
使用场景
有时候,你需要选择本身没有标签,但是
仍然易于识别的网页部位,比如段落首行
或鼠标进入等等。
针对a标签
正常链接a:link
访问过的链接a:visited(只能定义字体颜色)
鼠标滑过的链接a:hover
正在点击的链接a:active
针对其它标签
获取焦点:focus
指定元素前:before
指定元素后:after
选中的元素::selection
首字母:first-letter
首行:first-line
选择第一个子标签 :first-child
选择最后一个子标签:last-child
选择指定位置的子元素:nth-child
否定伪类
否定伪类可以帮助我们选择不是其他标签的某个标签。
语法:
:not(选择器){}
比如div:not(.box)表示选择所有的div元素但是class为box的除外。