一、认识CSS
CSS（Cascading Style Sheets）：层叠式样式表
- CSS 介绍了HTML元素如何显示在屏幕上，纸上，或在其他媒体
- CSS 节省了大量的工作. 它可以同时控制多个网页的布局
- 外部样式表存储在CSS文件中
二、CSS使用方式
行内样式表
<body style="color:blue;margin:0;">主体部分内容</body>
嵌入式样式表
定义在 <style>元素里面,在HTML的 <head>部分
<head>
<style>
body {
background-color: linen;
}
div {
color: maroon;
margin-left: 40px;
}
</style>
</head>
引入式样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
引入式样式表可以使用任何的文本编辑器编写，文件不应该包含任何HTML标签，样式表文件必须保存在为一个以.css为扩展名的文件中。
body {
background-color: linen;
}
div {
color: maroon;
margin-left: 40px;
}
三、CSS语法
1.CSS选择器
- 元素选择器：根据元素名称选择元素
语法格式：元素名{属性1:属性值1;属性2:属性值2}
div {
background-color: red;
width: 20px;
height: 30px;
}
- id选择器：使用HTML元素的ID属性来选择一个特定的元素，要选择特定id标识的元素, 前面加一个井号 (#), 后面跟元素的id，例如<div id=“aaa”>
#aaa {
background-color: red;
width: 20px;
height: 30px;
}
元素的ID在页面中是唯一的，id 名称不能以数字开头
- class（类）选择器：选择具有特定类的元素, 前面写一个点 (.), 其次是类的名称
例如 <div class=“bbb”>
.bbb {
background-color: red;
width: 20px;
height: 30px;
}
- 分组选择器：不同元素定义样式相同，例如：
div1 {
background-color: red;
width: 20px;
height: 30px;
}
div2 {
background-color: red;
width: 20px;
height: 30px;
}
div3 {
background-color: red;
width: 20px;
height: 30px;
}
使用分组选择器，从而减少代码量，使用过程中，用逗号分隔每个选择器。
在下面的例子中，我们将上面的代码使用分组选择器选择
div1,div2,div3 {
background-color: red;
width: 20px;
height: 30px;
}
选择器优先级：id>class>html元素(同级时离元素最近的优先级高)
2.CSS组合选择器
- 后代选择器：匹配指定元素后代的所有元素
下例选择包括在<div>中的所有<p>元素
div p {
background-color: yellow;
}
- 子选择器：选择指定元素的直接子元素的所有元素
下例选择所有<div>元素的直接子元素<p>
div > p {
background-color: yellow;
}
- 相邻兄弟选择器：选择指定元素的相邻兄弟的所有元素，兄弟元素必须具有相同的父元素
下例选择<div>元素后面的所有相邻兄弟元素<p>
div + p {
background-color: yellow;
}
- 一般兄弟选择器：选择指定元素兄弟的所有元素
下例选择<div>元素的所有兄弟元素<p>
div ~ p {
background-color: yellow;
}
3.CSS属性选择器
- 属性选择器
下例是把包含（div）的所有元素变为蓝色：
[div]
{
color:blue;
}
- 属性和值选择器
下例改变了标题title='codingdict’元素的边框样式：
[title=codingdict]
{
border:5px solid green;
}
- 属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值：
[title~=hello] { color:blue; }
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en] { color:blue; }
- 表单样式
无需使用class或id的形式
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
4.伪类选择器
CSS伪类是用来添加一些选择器的特殊效果
anchor伪类
- a:link {color:#FF0000;} /* 未访问的链接 */
- a:visited {color:#00FF00;} /* 已访问的链接 */
- a:hover {color:#FF00FF;} /* 鼠标划过链接 */
- a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
first-child 伪类
- 匹配第一个 <p> 元素
p:first-child {
color:blue;
}
- 匹配所有<p>元素中的第一个 <i>元素
p > i:first-child {
color:blue;
}
- 匹配所有作为第一个子元素的 <p>元素中的所有<i>元素
p:first-child i {
color:blue;
}
after 选择器 ：在元素之后插入内容
p:after {
background-color:yellow;
color:red;
}
/*每个<p>元素之后插入内容*/
before选择器：在元素之前插入内容
p:before {
background-color:yellow;
color:red;
}
/*每个<p>元素之前插入内容*/
5.CSS注释
语法格式：/*注释内容*/
div {
background-color: red;
/* 这个是单行注释 */
}
/*
这个是
多行
注释*/
四、CSS常用属性
1.颜色属性
- Color 名称
p { color:yellow; }/*显示为黄色*/
- RGB 值：每个参数 (red, green, and blue) 定义颜色在0和255之间的强度
RGB（255,0,0）显示为红色，因为红色是它的最高值（255）和其他的设置0
显示颜色为黑色，所有颜色参数必须设置为0，这样：RGB（0,0,0）
显示白色，所有颜色参数必须设置为255，这样：RGB（255,255,255）
p { color:rgb(255,255,0); }/*显示为黄色*/
- HEX 值：颜色也可以在窗体中使用十六进制值指定: #RRGGBB, 这里 RR (red), GG (green) 和 BB (blue) 是 00 到 FF 之间的一个取值
p { color:#FFFF00; }/*显示为黄色*/
2.字体属性
- font-family属性：设置文本字体
p {
font-family: "Times New Roman", Times, serif;
}
- font-size属性：设置文本的大小
- 用像素设置字体大小
- 用Em设置字体大小
- 用百分比设置大小
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
p {
font-size: 14px;
}
- font-weight属性：指定字体加粗
p.normal {
font-weight: normal;/*默认值*/
}
p.thick {
font-weight: bold;/*粗体*/
}
- font-style 属性：是用来指定字体样式
- normal - 文本显示正常
- italic - 文本以斜体显示
- oblique - 文本是“倾斜”的 (oblique 和 italic非常相似, 但支持的很少)
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
- font-variant 属性：指定是否应以小大写字体显示文本
使用 small-caps 字体, 所有的小写字母转换为大写字母. 然而，转换后的大写字母呈现一个较小的字体大小比原来的大写字母的文本
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
3.背景属性
- background-color 属性：指定元素的背景色
body {
background-color: blue;
}
- background-image 属性：用作元素背景的图像
body {
background-image: url("图片路径");
}
- background-repeat属性：设置背景图像将如何重复
body {
background-image: url("aaa.png");
background-repeat: repeat-x;/*水平重复*/
/*垂直重复图像，设置 background-repeat: repeat-y*/
/*不重复background-repeat: no-repeat*/
}
- background-position属性：设置图像的位置
body {
background-image: url("aaa.png");
background-position: right top;
}
- background-attachment属性：指定背景图像是固定的（不会滚动页面的其余部分）
body {
background-image: url("aaa.png");
background-position: right top;
background-attachment: fixed;
}
简写方式
body {
background: #ffffff url("aaa.png") no-repeat right top;
}
4.文本属性
- color 属性：设置文本的颜色
p {
color: blue;
}
- text-align 属性：设置文本的水平对齐方式
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
- text-indent属性：指定文本块中第一行的缩进
p {
text-indent:50px;
}
- letter-spacing属性：增加或减少文字中字符间的间距
h1 {
letter-spacing:2px
}
- word-spacing 属性：指定文本中单词之间的空间
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
- direction 属性：更改元素的文本方向
div {
direction: rtl;/*文本方向从右到左*/
/*direction:ltr; 默认值，文本方向从左到右。*/
}
- text-transform 属性：指定大写字母和小写字母的文本
p.uppercase {
text-transform: uppercase;/*大写*/
}
p.lowercase {
text-transform: lowercase;/*小写*/
}
p.capitalize {
text-transform: capitalize;/*每个单词以大写字母开头*/
}
- text-shadow 属性：将阴影添加到文本中
h1 {
text-shadow: 3px 2px red;
}
5.边框属性
border属性：在一个声明中设置所有边框属性
border属性值：
- border-style属性：指定边框的样式
div {
border-style:solid;
}
- 定义某一方向的边框样式
border-top-style：设置顶部边框的样式
border-bottom-style：设置底部边框的样式
border-left-style：设置左边框的样式
border-right-style：设置右边框的样式 - border-style属性值：
- border-width属性：指定边框的宽度
div {
border-style: solid;
border-width: 5px;
}
- 定义某一方向的边框宽度
border-top-width：设置顶部边框的宽度
border-bottom-width：设置底部边框的宽度
border-left-width：设置左边框的宽度
border-right-width：设置右边框的宽度 - border-width属性值：
- border-color属性：指定边框的颜色
div {
border-style:solid;
border-color:#ff0000 #0000ff;
}
- 定义某一方向的边框颜色
border-top-color：设置顶部边框的颜色
border-bottom-color：设置底部边框的颜色
border-left-color：设置左边框的颜色
border-right-color：设置右边框的颜色 - border-color属性值：
- inherit：指定应该从父元素继承border属性值
简写方式
div {
border:5px solid red;
}
6.列表属性
-
list-style 属性：将所有列表属性设置为一个声明
-
list-style-type 属性：设置列表项标记的类型
ul.a {
list-style-type: circle;/*标记是空心圆*/
}
list-style-type 属性值：
- list-style-position 属性：指定列表项标记是否应出现在内容的内部或外部
ul {
list-style-position: inside;
}
list-style-position 属性值：
- list-style-image 属性：指定使用图像作为列表项标记
ul {
list-style-image: url('aaa.gif');
}
list-style-image 属性值：
简写方式
ul {
list-style: square inside url("aaa.gif");
}
五、CSS盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- margin(外边距) - 清除边框外的区域，外边距是透明的
- border(边框) - 围绕在内边距和内容外的边框
- padding(内边距) - 清除内容周围的区域，内边距是透明的
- content(内容) - 盒子的内容，显示文本和图像
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
例子中的元素的总宽度为320px；
最终总元素宽度、高度计算公式：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
六、CSS布局相关属性
1.位置属性
position 属性：指定用于元素的定位方法的类型
- position: static–静态定位，元素不受上、下、左、右属性的影响
div {
position: static;
border: 3px solid #73AD21;
}
- position: relative–相对于其正常位置定位
div {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
- position: fixed–位于相对于视口, 这意味着它总是停留在同一个地方，即使页面滚动。 顶部、右、底部和左属性用于定位元素。
div {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
- position: absolute–根据就近的父元素来定位（而不是相对设置的视口，如固定），如果一个绝对定位的元素没有定位的父元素，它使用body，并且随着页面滚动而移动。
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
层叠元素
当元素定位时，它们可以重叠其他元素
z-index 属性指定元素的堆栈顺序(哪些元素应该放在前面，哪些放在后面)
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;/*z-index 是 -1, 所以它被放在文本的后面*/
}
2.display显示属性
display属性：指定元素是否显示
div{
display:inline;
}
display属性值：
3.浮动属性
- float 属性：指定元素是否应该浮动
div {
float: right;/*右浮动*/
/* float:left 左浮动*/
margin: 0 0 10px 10px;
}
- clear 属性：控制浮动元素的行为（清除浮动）
div {
clear: left;
}
- overflow 属性：指定当元素的内容太大而无法放入指定区域时是剪辑内容还是添加滚动条
div {
overflow: hidden;/*超出部分隐藏*/
/*overflow:scroll 无论内容是否超出层大小都添加滚动条*/
/*overflow:auto 超出时自动添加滚动条*/
}
1287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
