CSS3基础总结一(盒子之前所有内容)

CSS基础

CSS基本语法结构

h1 {
	font-size:12px;
}

h1–>为选择器 其中font-size–>为属性 12px–>为值

在HTML中引入CSS样式

1.内部样式表

内部样式表(内嵌样式表)是写到html页面内部。是将所有的CSS代码抽取出来，单独放到一个标签中。 语法如下

<style>
    div{
        color:red;
        font-size:12px;
    }
</style>

2.行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式。适合修改简单样式。 如法如下

<div style="color:red;font-size:12px;">--内容--</div>

3.外部样式表

引入外部样式表分为两步：

1. 新建一个后缀名为.css 的样式文件，把所有CSS代码都放入此文件中。

2. 在HTML页面中，使用标签引入这个文件。代码如下

   <link rel="Stylesheet" href="CSS文件路径">
   

基础选择器

1.标签选择器

标签选择器(元素选择器)是指用HTML标签名称作用选择器，按标签名称分类为页面中某一类标签指定统一的CSS样式。

如：

p{
	属性1:属性值1;
}

2.类选择器

单独选一个或者某几个标签，可以使用类选择器。

如：

<P class="q">变红</P>

.q{
	color:red;
}

类选择器在HTML中用class属性表示,用“ . ”来定义。

3.id选择器

一个id属性只能选择一个

如：

<P id="q">变绿</P>

#q{
	color:green;
}

类选择器在HTML中用id属性表示，用" # "来定义。

4.通配符选择器

在CSS中，通配符选择器使用" ***** "定义，它表示选取页面中所有元素(标签)

如：

*{
	color:yello;
}

高级选择器

1.层次选择器

层次选择器语法

选择器	功能类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

2.结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，关键字为 even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

3.属性选择器

选择器	功能描述
E [attr]	选择匹配具有属性attr的E元素
E [attr=val]	选择匹配具有属性attr的E元素，并且属性值为val(其中val区分大小写)
E [attr^=val]	选择匹配元素E，并且E元素定义了属性attr，其属性值是以val开头的任意字符串
E [attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E [attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，话句话说，字符串val与属性值中的任意位置相匹配

4.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。

并集选择器是各选择器通过英文逗号" , "连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

p,div{
	color:red
}

元素1，元素2{样式声明} 选择p和div标签元素

• 元素1和元素2中间用逗号隔开

• 逗号可以理解为和的意思

• 并集选择器通常用于集体声明

5.链接伪类选择器

选择器	功能描述
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位置其上的链接
a:active	选择活动链接(鼠标按下未弹起的链接)

链接伪类选择器注意事项:

1. 为了确保生效，请按照L V H A的循环顺序声明

   link - : visited - :hover - :active

2. 记忆法：love hate

3. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

   **注：**其它选择器也可使用链接伪类，并不是a链接专属

6.focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

语法如下：

input:focus{
	background-color:yellow;
}

元素模式转换

在css中有三种元素

1.块元素

常见的有:

<h1>~<h6>、<div>、<ul>、<li>

特点：

1. 比较霸道，自己独占一行

2. 高度、宽度、外边距以及内边距都可以控制。

3. 宽度默认是容器（父级宽度）的100%。

4. 是一个容器及盒子，里面可以放行内或者块级元素。

   注：

   • 文字类的元素内不能使用块级元素

      <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
     

     同理，
     <h1>~<h6>等都是文字类块级标签，里面也不能放其它块级元素。
     

2.:行内元素

常见的有：

<a>、<Strong>、<b>、<em>、<i>、<del>、<span>、<s>、<ins>、<u>

1. 相邻行内元素在一行上，一行可以显示多个。

2. 高、宽直接设置是无效的。

3. 默认宽度就是它本身内容的宽度。

4. 行内元素只能容纳文本或其他行内元素

   注:

   • 链接里面不能再放链接

   • 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全。

3.行内块元素

在行内中有几个特殊的标签

<img>、<input>、<td>

它们同时具有块元素和行内元素的特点。

行内块元素的热点：

1. 和相邻行内元素(行内块)在一行上，但是它们之间会有空白缝隙。一行可以显示多个(行内元素特点)
2. 默认宽度就是它本身内容的宽度(行内元素特点)
3. 高度、行高、外边距以及内边距都可以空竹(块级元素特点)。

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性

• 转换为块元素：display:block;
• 转换为行内元素: display:inline;
• 转换为行内块元素:display:inline-block;

常用字体属性、含义及用法

属性名	功能	例子
font-family	设置字体类型	font-family:“微软雅黑”
font-size	设置字体大小	font-size:12px
font-style	设置字体风格	font-style:italic
font-weight	设置字体的粗细	font-weight:bold

font-family

如：

p{
	font-family:Verdana,"微软雅黑"
}

在p标签中，英文使用Verdana，中文使用"微软雅黑"

font-family:可以同时声明多种字体，用逗号分隔。

font-style

font-style有三个值，如下

normal	默认值
italic	斜体字体样式
obligue	倾斜的字体样式

font-weight属性的值

normal	默认值
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体

注： 400等同normal 700等同bold

常用的文本属性、含义及用法

属性名	功能
color	设置文本颜色
text-aligh	设置元素水平对齐方式
text-indent	设置首行文体的缩进
line-height	设置文本的行高
text-decoration	设置文本的装饰
text-shadow	设置文本阴影

text-aligh属性

属性名	功能
left	把文本排列到左边，默认值，有浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

text-decoration属性

属性名	功能
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文体的删除线

text-shadow

语法：

text-shadow：color x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius)

常用列表样式

list-style-type属性设置列表项标记的类型，常用的属性值如下：

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

背景

1.背景颜色

代码如下：

background-color:颜色

可以输入 transparent 达到透明效果

2.背景图片

background-image:url(图片地址)

实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置(精灵图也是一种运用常见)

3.背景平铺

background-repeat:参数值

参数值	作用
repeat	背景图像在纵向和横向上平铺(默认的)
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

4.背景图片位置

利用background-position属性可以改变图片在背景中的位置。

background-position:x y；

参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。

属性名	含义	功能
length	百分数	由浮点数字和单位标识符组成的长度值

position：

top	向上垂直
bottom	向下垂直
left	向左对齐
right	向右对齐
center	水平居中

5.背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment后期可以制作视差滚动的效果。

background-attachment:参数

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

6.背景复合写法

使用复合写法时，没有特定的书写顺序，一般习惯约定顺序为：

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

7.背景色半透明

CSS3新增背景颜色半透明效果。

background-rgba(0,0,0,0.1)

• 最后一个参数时alpha(透明度)，取值范围在0~1之间
• 我们习惯把0.1的0省略掉
• 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

8.背景尺寸

想对背景图片的大小直接进行控制的时候就可以用到背景尺寸 background-size属性

1.auto

background-size:auto 为默认值，保持背景图片的原始高度和宽度;

2.cover

background-size:cover 可以使背景图片放大，铺满整个容器；

(背景图像失真) 当背景图片小于容器时，又无法使用background-repeat来实现时，就可采用cover

注：使用cover放大后的照片不在正中间，想要让背景图片在正中间显示，只需要在元素中设置background-position为center就可

3.contain

background-size:contain 它与cover值正好相反，使背景图片缩小，以适合铺满整个屏幕。

4.percentage

background-size:percentage 它可以使用0%~100%的值，此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

5.length

background-size:length 设置具体的值，可以改变背景图片的大小。

总结：除了使用默认值auto时，背景图片不会失真，其它的值都有可能出现失真的情况，所以使用的时候要仔细考虑，以免带来不良后果。

CSS3渐变

浏览器兼容

在使用css3渐变的之前，要考虑浏览器的支持情况。

浏览器对CSS3渐变的兼容性：

属性名	IE	Firefox	Chrome	Opera	Safari
Gradient	10+	19.0+	26.0+	12.1+	5.1+

注：各浏览器内核都不一样，需要在语法前面加上对应的前缀，才能让浏览器支持

浏览器	内核	前缀
IE	Trident	-ms-
Chrome	Webkit	-webkit-
Safari	Webkit	-webkit-
Opera	Blink	-o-
Firefox	Mozilla	-moz-

常规语法如下：

linear-gradient{position,color1,color2}

如果浏览器不兼容就要加前缀了 如内核Webkit的浏览器要兼容 语法如下：

-webkit-linear-gradient{position,color1,color2}

渐变方向

关键字	说明
to bottom	第一种颜色向第二种颜色渐变的方向是从顶部到底部
to left	第一种颜色向第二种颜色渐变的方向是从右边到左边。
to right	第一种颜色向第二种颜色渐变的方向是从左边到右边。
to top left	第一种颜色向第二种颜色渐变的方向是从右下方到左上方。
to top right	第一种颜色向第二种颜色渐变的方向是从左下方到右上方。l
to bottom left	第一种颜色向第二种颜色渐变的方向是从右上方到左下方。
to bottom right	第一种颜色向第二种颜色渐变的方向是从左上方到右下方。