本文详细介绍了CSS的基本概念，包括层叠样式表的三种存在方式及其优缺点，并深入探讨了选择器的种类与应用，以及常用的CSS属性如边框、文本、背景等。
一、概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的
语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
在css的三个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）
二、CSS样式
2.1 行内样式
它是所有样式方法中最为直接的一种，它直接对HTML的标签使用style属性，然后将css代码直接写在其中
<p style="color:#ff0000; font-size:20px; ">正文内容 1</p>
<p style=“color:#000000; font-style:italic;”>正文内容 2</p>
<p style="color:#ff00ff; font-size:25px; font-weight:bold;">正文内容 3</p>
2.2 内部样式
内部样式就是将css写在<head>与</head>之间，并且用<style>和</style>标签进行声明。
<style type="text/css">
p{
color:#0000ff;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
</style>
2.3 外部样式
<head>
<title>页面标题</title>
<link href="07-07.css" type="text/css" rel="stylesheet">
</head>
<h2>CSS标题</h2>
<p>这是正文内容……</p>
<h2>CSS标题</h2>
<p>这是正文内容……</p>
三、CSS选择器
3.1标签选择器
div{ background-color:red; }
<div > </div>
3.2 类选择器
.bd{ background-color:red; }
<div class='bd'> </div>
3.3 ID选择器
#idselect{ background-color:red; }
<div id='idselect' > </div>
3.4 关联选择器
#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>
3.5 包含选择器
input,div,p{ background-color:red; }
3.6 属性选择器
input[type='text']{ width:100px; height:200px;}
3.7 伪类选择器
:link 定义超链接默认样式
:visited 定义访问过的样式
:hover 定义鼠标经过的样式
:active 定义鼠标按下的样式
a:link { color:#ff0000; } /*默认样式，超链接文字为红色*/
a:visited { color:#00ff00; } /*访问过后，超链接文字为绿色*/
a:hover { color:#0000ff; } /*鼠标经过，超链接文字为蓝色*/
a:active { color:#ffff00; } /*鼠标按下时，超链接文字为黄色*/
3.8 选择器优先级
行内样式>id选择器>类选择器>标签选择器>通用选择器
其他材料参考：http://www.w3school.com.cn/css/index.asp
四、CSS常用属性
4.1 border属性-设置边框
border-style:dotted solid double dashed;
上边框是点状、右边框是实线、下边框是双线、左边框是虚线
<div style='border:1px solid red; height: 10px;'></div>
<div style='border:1px dotted red; height: 10px;'></div>
<div style='border:1px dashed red; height: 10px;'></div>
4.2 文本属性
文本行高：line-height
语法： line-height：行高值(像素)
水平对齐： text-align
left：左对齐；
right：右对齐
center：居中对齐
4.3 文字属性
字号：font-size
语法：font-size：大小的取值(像素值)
文字颜色：color
语法：Color：颜色取值
color:#292378; //6个十六进制数获得颜色
color:#A64; //#AA6644的缩写
color:red; //颜色关键字定义颜色
color:rgb(100,159,170); //rgb定义颜色
4.4 background属性-设置背景
背景颜色：background-color
关键字：red pink orange
背景图像：background-image
使用background-image属性可以设置元素的背景图像。
语法：background-image：url（图像地址）
背景重复：background-repeat
语法：background-repeat：取值
Repeat(默认) 背景图像平铺排满整个网页
repeat-x 背景图像只在水平方向上平铺；
repeat-y 背景图像只在垂直方向上平铺。
no-repeat 背景图像不平铺
背景位置：background-position
background-position-x:200px ;
background-position-y:100px;
4.5 margin外边距填充属性
边距属性
margin是对外元素的距离，用来控制元素本身的浮动位置
四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right
margin 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
居中显示
4.6 padding内边距填充属性
填充属性
padding是对内元素，用来控制元素内部元素的位置
四边填充 padding
上填充 padding-top
下填充 padding-bottom
左填充 padding-left
右填充 padding-right
padding 10px 20px 30px 40px;
提供一个，用于的四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
4.7 float布局属性
float
float:none; 默认值
float:left; 左浮
float:right; 右浮
4.8 Display属性
Display：
block：将元素变成块级标签，可以设置高度和宽度
Inline：将元素变成行内标签，不能设置高度和宽度
Inline-block：同时具有两种
none：标签消失
<span style="height:70px;width:20px;">行内标签</span>
4.9 布局属性overflow
溢出处理属性overflow分类
Overflow (水平和垂直均设置)
Overflow-x (设置水平方向)
Overflow-y (设置垂直方向)
4.10 布局属性position
定位属性position:
fixed : 将某个元素固定在页面的某个位置
absolute : 绝对定位
relative：相对定位
定位方式通常与定位坐标一起使用
定位坐标：要定位的元素偏离目标位置多远的距离
Top，left，right，bottom
定位属性position:
fixed : 将某个元素固定在页面的某个位置
特点：
1.相对于浏览器的窗口来进行定位的
2.固定到窗口的某个位置上，不随内容而滚动
3.如果不设置定位坐标，就在原来的位置，否则反之
定位属性position:
relative: 相对定位
特点：
1.相对定位是相对于，自身的左上角为坐标点
2.占据空间
定位属性position:
absolute：绝对定位
特点：
1.相对于（父级元素的定位方式（relative ）来进行定位 找祖先元素是否有定位，如果没有定位，找到body，就相对body来定位 如果找到祖先元素有定位，相对祖先元素来定位
2.不占空间
4.11 布局属性z-index
定位属性z-index:
Z-index：设置对象的层叠顺序
特点：
较大 number 值的对象会覆盖在较小 number 值的对象之上
扫一扫
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
