前端自学笔记_CSS

一、CSS基础

1.CSS样式

样式是css最小的语法单元，每个样式包含两部分内容：选择器和声明（规则）。声明包含两个部分：属性和属性值

body { font-size: 12px; color: #333; }

body：选择器
{}：样式分隔符
font-size: 12px; ：声明
font-size：属性
12px：属性值

2.CSS的注释

/*注释语句*/

3.CSS的应用

（1）行内样式

<!-- 行内样式一般放在html开始标签中的style属性中，
多个行内样式使用分号分隔，单个行内样式不用分号
其特点是：只能修饰该标签的内容 -->
<p style="background-color:#999900">行内样式</p>
<h2 style="background-color:#FF6633;color:#FFF">多个行内样式</h2>

（2）内嵌式

<!-- 内嵌式将CSS写在html的<style></style>标签对中，
其特点是：该样式只能在此页使用
例如下方的样式表示本页所有的<p>标签的样式 -->
<style>
p {
	text-align: left; /* 文本左对齐 */
	font-size: 18px; /* 字体大小18像素 */
	line-height:25px; /* 行高25像素 */
	width: 500px; /* 段落宽度 */
}
</style>

（3）链接式

<!-- 链接式通过html的<link>标签，将外部样式表文件链接到html文档中，
通过将html文档与css文件完全分离，实现结构层与表示层的彻底分离 -->
<link href="lianjie.css" type="text/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />

/* lianjie.css */
h3 {
	font-weight: normal; /* 取消标题默认加粗效果 */
	background: #66CC99;
	height: 50px;
}
span {
	color: #FF0000; /*字体颜色设置*/
	font-weight: bold; /*字体加粗*/
}

（4）导入样式

<!-- 导入样式使用@import命令导入外部样式表
导入样式的语句要放在之前所有的样式使用语句之前 -->
@import daoru.css
@import 'daoru.css'
@import "daoru.css"
@import url(daoru.css)
@import url('daoru.css')
@import url("daoru.css")

4.CSS特性

（1）css样式的优先级

不同位置的样式优先级：
行内样式 > 内嵌式 > 链接式 > 导入样式

不同选择器选择了同一个对象：（可以使用加权值）
标签选择器：1（p {} )
伪元素或伪对象选择器：1
类选择器：10 ( .cent {} )
属性选择器：10
ID选择器：100 ( #imp {} )
其他选择器：0
!important：正无穷 ( span { font-size: 18px !important; } ) (!important命令要在声明与分号之间）
被继承的值：0

二、CSS选择器

1.标签选择器

p {font-size: 18px;}

2.类选择器

.font36px {font-size: 36px;}

3.ID选择器

#box {font-size: 18px;}

4.通配选择器（所有元素定义相同的样式）

* {font-size: 18px;}

5.组合选择器

（1）包含选择器

#main p {font-size: 18px;} /* main包含框内的所有的段落字体大小为18px */

（2）子选择器

#main>p {font-size:20px;} /*main元素的直接子元素*/

子选择器和包含选择器的区别：>作用于元素的第一代后代，空格作用于元素的所有后代。

（3）相邻选择器

p+h3 {background-color: #0099FF;} /*影响的是h3；h3必须在p后面且相邻*/

（4）兄弟选择器

h5~h1 {background: #000;} /*影响h5后面所有同级的h1*/

（5）分组选择器

h1,h2,h3 {color: #000;} /*h1,h2,h3没有任何关系，仅仅为了减少代码量，统一设置*/

6.属性选择器

E代表之前提到的4类基础选择器之一
eg: a[id] {background: #000;}

7.伪类选择器

伪选择器以冒号（:）作为前缀标识符，冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格。

a:link {color:red;}
a.selected:hover {color:blue;}

（1）动态伪类

锚点伪类： 一种在链接中常见的样式，如 :link（未访问）、:visited（已访问）
行为伪类： 用户操作伪类，如 :hover（鼠标覆盖）、:active（鼠标点击）

（2）结构伪类

nth-child( ):

其余带括号的里面的参数与nth-child( )中的一致

（3）否定伪类

:not()表示否定选择器，即排除或者过滤掉特定元素（括号里面是另一个选择器）
eg: input:not([type=“submit”])

（4）状态伪类

三、CSS美化网页文本

1.字体样式

2.字体颜色

color: 设置字体颜色

3.文本样式

四、CSS美化图像

1.图像边框

图像边框包括两种：虚线框和实线框
虚线框包括：点线和实线

img {width: 250px; margin: 12px; }
.dotted { /*点线*/
	border-style: dotted;
}
.dashed { /*虚线*/
	border-style:dashed;
}

实线框包括实现（solid），双线（double），立体凹槽（groove），立体凸槽（ridge），
立体凹边（inset），立体凸边（outset）

单独定义边框样式：border-top-style、border-right-style、border-bottom-style、border-left-style
快速定义四个边框样式：border-style: top right bottom left
或者：border-style: top/bottom right/left
border-style: top left/right bottom

边框颜色和宽度：

img {
	border-color:red blue green yello
	border-width:10px 20px 30px
}

图像的透明度：

opacity属性可以设置图像的透明度
opacity:0~1
取值范围在0到1之间，数值越低透明度越高

定义图像圆角：

border-radius属性可以设置圆角样式，
border-radius参数包含两个：水平半径/垂直半径
如果参数只有一个则表示两个半径相同

2.设置背景图像

background-image参数

background-repeat参数

五、网页排版

1.浮动显示

可以使用float属性定义元素向左侧或右侧浮动
float: none | left | right

2.定位显示

可以使用position属性定义元素位置
position: static | relative | absolute | fixed
static：表示不定位，元素遵循HTML默认的流动模型
absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父定位包含框（有position属性）进行绝对定位，如果不存在这样的定位包含框，则相对于浏览器窗口。其层叠顺序通过z-index来定义（值越大，图层越高）
fixed：表示固定定位，与absolute定位类似，但他的定位包含框为视图本身，由于视图本身是固定的，他不会随浏览器窗口的滚动条滚动而变化
relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。其本质是先按static生成一个元素，然后移动这个元素。元素偏移前的位置留白。