前端复习 css（一）

如果我们把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的除外。