CSS-Cascading Style Sheet 层叠样式表
来源：互联网 发布：php技术文档模板 编辑：程序博客网 时间：2024/06/05 00:44
引言
在上一篇中，说到了html的相关标签的使用，下面主要介绍css的相关知识点。
html：负责网页的结构
css： 负责网页的美观（样式）
css的使用方式
（1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
（2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
（3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件
CSS语法
选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景…..
CSS值（value）：添加样式的具体值。12px , 红色，背景图片….
一、 选择器
标签选择器
作用： 选择同名的标签
注意：选择到所有同名的标签
类选择器
作用： 选择同类的标签
注意：
1）选择的标签必须有class的属性。同类的标签使用同名
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！
id选择器
作用： 选择一个标签
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById(“id属性值”)
3）id选择器的优先级最高！
并集选择器
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。
交集选择器
作用： 选择某个选择器中的子标签。
通用选择器
作用； 选择所有的标签
伪类选择器
作用：控制标签在不同状态下的样式。
标签有四种状态：
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活（按下但没有松开）的状态
visited: 已经被访问过的状态（鼠标点下且松开）
相关的代码表示在下面显示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css语法及选择器</title><!-- css语法: a{ font-size:36px; color:#008800; } 主要包含以下三部分内容: 选择器 css样式属性 css样式属性的值--><style type="text/css"> /*1.标签选择器*/ div{ font-size:18px; color:#0F0} /*2.类选择器*/ .d1{ font-size:24px; color:#00F} /*3.id选择器 注意: 1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高 2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签 */ #d2{ font-size:14px; color:#F0F} /*4.并集选择器*/ .d1,.d3{ font-size:16px; color:#090} /*5.交集选择器*/ div span{ font-size:18px; color:#3F9}</style></head><body><div>div1</div><br /><div>div2</div><br /><div class="d1">div3</div><br /><div class="d1" id="d2">div4</div><br /><div class="d3">div5</div><br /><div><span>divv中的span标签</span></div><br /><span>独立的span标签</span></body></html>结果如下图所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>伪类选择器</title><style type="text/css"> /*link:没有访问过的状态*/ a:link{ font-size:14px; color:#F00 } /*visited：已经访问过的状态*/ a:visited{ font-size:24px; color:#F0F} /*hover:鼠标划过的状态*/ a:hover{ font-size:18px; color:#00F} /*active:鼠标按下后没有松开的状态*/ a:active{ font-size:18px; color:#FF0}</style></head><body><a href="3_css语法及选择器.html">伪类选择器</a></body></html>结果如下图所示（下图展示的是鼠标滑过时的状态） 
二、常用的CSS属性和值
CSS文本
CSS字体
CSS背景
CSS列表
CSS表格
CSS边框
相关标签的代码表示形式如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css文本属性和值</title><style type="text/css"> div{ /*color：颜色*/ color:#F00; /*字符间距*/ letter-spacing:10px; /*对齐方式*/ text-align:center; /*文本修饰 下划线-underline,中划线(line-through),上划线-overline,没:none*/ text-decoration:underline; /*单词间距*/ word-spacing:10px }</style></head><body><div>薛之谦 的 愿望是 世界和平</div></body></html>结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css字体</title><style type="text/css"> div{ /*字体类型*/ /* font-family:宋体;*/ /*字体大小*/ /* font-size:36px;*/ /*字体样式*/ /* font-style:italic;*/ /*字体粗细*/ /* font-weight:bold;*/ /*简写：样式、粗细、大小、类型*/ font:italic bold 36px 宋体; }</style></head><body><div>薛之谦的心愿是世界和平</div></body></html>结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css背景</title><style type="text/css"> body{ /*背景颜色*/ /* background-color:#966;*/ /*背景图片*/ /*background-image:url(../../../../../Pictures/Saved%20Pictures/21654167370059749.jpg);*/ /*设置背景图片是否重复，或如何重复 not-repeat: 不重复 repeat-x: x轴重复 repeat-y: y轴重复 repeat: x和y轴重复(默认) */ /*background-repeat:repeat-x;*/ /*background-repeat:repeat-y;*/ /* background-repeat:no-repeat;*/ /*background-repeat:repeat;*/ /*设置背景的起始位置 参数一：显示的图片需要从那个位置开始显示 参数二：你的图片显示的位置*/ /* background-position:top center;*/ /*简写属性:颜色 图片 重复 位置*/ background:#966 url(../../../../../Pictures/Saved%20Pictures/IMG_20161107_091700.jpg) no-repeat top center; }</style></head><body></body></html>结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css列表</title><style type="text/css"> ul{ /*列表符号类型*/ /*list-style-type:circle;*/ /*设置列表符号的图片*/ /*list-style-image:url(../../java%E4%B8%8A%E8%AF%BE/24%E7%AC%AC%E4%BA%8C%E5%8D%81%E5%9B%9B%E5%A4%A9/css%E8%B5%84%E6%96%99/05.%E7%B4%A0%E6%9D%90/start.jpg);*/ /*简写:类型 图片*/ list-style:circle url(../../java%E4%B8%8A%E8%AF%BE/24%E7%AC%AC%E4%BA%8C%E5%8D%81%E5%9B%9B%E5%A4%A9/css%E8%B5%84%E6%96%99/05.%E7%B4%A0%E6%9D%90/head.png); }</style></head><body><ul><li>薛之谦</li><li>黄晓明</li><li>方大同</li></ul></body></html>如果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css表格</title><style type="text/css"> table{ /*合并表格的边框*/ border-collapse:collapse}</style></head><body><table border="1" align="center" height="300" width="400"><tr align="center"><th>姓名</th><th>语文</th><th>数学</th></tr><tr align="center"><td>张三</td><td>89</td><td>77</td></tr><tr align="center"><td>李四</td><td>89</td><td>99</td></tr><tr align="center"><td>王五</td><td>78</td><td>88</td></tr></table></body></html>结果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css边框</title><style type="text/css"> div{ height:300px; width:300px; /*设置颜色*/ /*border-bottom-color:#F00; border-top-color:#0F9; border-left-color:#90C; border-right-color:#FF6;*/ /*实线:solid*//* border-bottom-style:solid;*/ /*点划线:dotted*//* border-left-style:dotted;*/ /*双实线:double*//* border-right-style:double;*/ /*虚线:dashed*//* border-top-style:dashed;*/ /*简写属性*/ border: 3px solid #F00;}</style></head><body><div>薛之谦</div></body></html>结果如下： 
三、盒子模型
定义：可以把html页面上每个标签看做是一个盒子。
盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>盒子模型</title><style type="text/css"> div{ width:200px; height:200px; border:6px solid #F00} #d1{ width:200px; height:200px; padding-top:15px; padding-left:20px; margin-bottom:10px; }</style></head><body><div id="d1">div1</div><div >div2</div></body></html>结果如下： 
四、 CSS定位
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css定位</title><style type="text/css"> div{ height:300px; width:300px; border:3px solid #F00} #d1{ /*相对定位,相对于自己之前的位置*/ /*position:relative; top:20px; left:20px;*/ /*绝对定位:相对于自己的父标签而言*/ /*position:absolute; top:10px; left:10px;*/ /*固定定位:相对于浏览器而言*/ position:fixed; top:100px; left:500px;}</style></head><body><div>div1</div><div id="d1">div2</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body></html>结果如下：（显示的是固定定位）
阅读全文
0 0
- CSS-Cascading Style Sheet 层叠样式表
- CSS： Cascading Style Sheet（层叠样式表）
- Cascading Style Sheet 层叠样式表
- css （Cascading style sheet）样式表
- Web之旅第四站——CSS（Cascading style Sheet) 层叠样式表
- CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets)
- 层叠样式表(Cascading Style Sheets，CSS)简介
- CSS（Cascading Style Sheets）层叠样式表
- CSS层叠样式表（Cascading Style Sheets）
- CSS（层叠样式表）Cascading Style Sheets
- CSS（Cascading Style Sheets）层叠样式表
- 二、CSS【Cascading Style Sheets层叠样式表】
- CSS Cascading Style Sheets(层叠样式表单)
- CSS（Cascading Style Sheet ）级联样式表总结
- CSS层叠样式表 (Cascading Style Sheets)基础，CSS样式三种插入方式优先级比较
- Cascading Style Sheets（CSS层叠样式表单）
- #笔记#圣思园 JavaWeb 第2讲——CSS层叠样式表Cascading Style Sheets
- Web前端开发之CSS（层叠样式表、全称：Cascading Style Sheets）
- [PPPOE]PPPD源码分析
- 游戏UI框架设计(三) : 窗体的层级管理
- Spring Cloud 学习之旅 --- 随机端口启动多实例
- <input />调用日历组件 触发键盘输入法
- Java实现-旋转字符串
- CSS-Cascading Style Sheet 层叠样式表
- xml(❤U)
- Easyui小知识点汇总
- MYSQL修改表结构语句 alter
- Go语言学习之html/template包(The way to go)
- 文章标题
- gdb和g++的简单使用
- Windows下Python2.7配置OpenCV2.4.10
- shell查看进程状态－－ps命令
