黑马程序员技术交流社区
标题: 【济南中心】PHP课程同步笔记day04：CSS介绍(一) [打印本页]
作者: 小鲁哥哥 时间: 2017-2-15 14:42
标题: 【济南中心】PHP课程同步笔记day04：CSS介绍(一)
【济南中心】PHP课程同步笔记day04：CSS介绍(一)
CSS简介
CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或者XML等文件样式的计算机语言。其扩展名为.css。CSS不仅可以静态的修饰网页，还可以配合各种脚本语言动态的对各网页元素进行格式化。
初学CSS，可先用内嵌式样式进行学习，位置为<head></head>之间，标记：<style type=”text/css” >样式写在这里</style>
CSS语法格式
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器{属性1：值1;属性2：值2;属性n：值n;}
选择器：通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS注释
HTML注释：<!--注释的内容，在页面中是不显示的-->
CSS注释：/*注释内容*/，不管是单行还是多行只有这一种办法。
CSS基本选择器
基本选择器
Style属性(行内样式)：直接写在标签内
如：u<p style=”font-size:12px; color:red;” >文字内容</p>
标签选择器
针对HTML的标签设置样式，这个需要写在<style>标签内。
[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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
p{font-size:22px;color:green;}标签选择器部分
</style>
</head>
<body>
<p>记忆像是倒在手心里的水，不论是摊平还是握紧，终究还是会从指缝中一滴一滴流淌干净。</p>
<p class="test">一个人的时候，或许会难过，别忘了安慰下自己，再怎么难过，明天依旧要继续走下去。</p>
</body>
</html>
ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式，对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。
语法：以”#”开头
使用方法：<p id=”id的名称”></p>
[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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
p{font-size:22px;color:green;}标签选择器部分
#a{color:red;}
#A{color:blue;}
</style>
</head>
<body>
<p id="a">记忆像是倒在手心里的水，不论是摊平还是握紧，终究还是会从指缝中一滴一滴流淌干净。</p>
<p>一个人的时候，或许会难过，别忘了安慰下自己，再怎么难过，明天依旧要继续走下去。</p>
</body>
</html>
注意：
ID选择器是区分大小写的。
类选择器
语法：以”.”开头，后面跟类名
使用方法：<p class=”类名”>内容</p>
[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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
p{font-size:22px;color:green;}
#a{color:red;}
.test{color:yellow;}
</style>
</head>
<body>
<p id="a">记忆像是倒在手心里的水，不论是摊平还是握紧，终究还是会从指缝中一滴一滴流淌干净。</p>
<p class="test">一个人的时候，或许会难过，别忘了</p>
<p>安慰下自己，再怎么难过，明天依旧要继续走下去。</p>
</body>
</html>
通配符选择器
针对当前页面所用的标签应用同样的样式(对标签的初始化)
*{CSS规则}
如：*{margin:0;padding:0;border:0;}
标签和类结合
如：p.test{color:red}=>针对p标签应用类名为test的样式
[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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#a{color:red;}
div.test{color:yellow;}
p.test{color:green;}
</style>
</head>
<body>
<p id="a">记忆像是倒在手心里的水，不论是摊平还是握紧，终究还是会从指缝中一滴一滴流淌干净。</p>
<p class="test">一个人的时候，或许会难过，别忘了</p>
<span>安慰下自己，再怎么难过，明天依旧要继续走下去。</span>
<div class="test">一个人的时候，或许会难过，别忘了</div>
</body>
</html>
组合选择器
多元素选择器
多个标签或选择器同时声明。
如：h1,h2,ul,li{margin:0;padding:0;}
定义的方法：选择器之间用逗号隔开
后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
例如：p空格span{color:red;}
[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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
p span{color:red;}
</style>
</head>
<body>
<h1><span>心灵</span>鸡汤</h1>
<p id="a">记忆像是倒在手心里的水，不论是摊平还是握紧，终究还是会从指缝中一滴一滴流淌干净。</p>
<p class="test">一个人的时候，或许会难过，别忘了
<span>安慰下自己，再怎么难过，明天依旧要继续走下去。</span></p>
</body>
</html>
子元素选择器
请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
例如：p>span{color:red;}
只会针对p标签内的第一级span标签有效
[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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
p>span{color:red;}
</style>
</head>
<body>
<h1><span>心灵</span>鸡汤</h1>
<p>记忆像是倒在手心里的水，不论是摊平还是握紧，终究还是会从指缝中一滴一滴流淌干净。</p>
<p>一个人的时候，<b><span>或许</span></b>会难过，别忘了
<span>安慰下自己，再怎么难过，明天依旧要继续走下去。</span></p>
</body>
</html>
伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。
如：<a href=”#”></a>
A:link链接的政策状态
A:visited鼠标单击过的链接状态
A:hover鼠标放在链接上面的(悬停)状态
A:active当前正在访问的链接状态
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
