CSS(Cascading Style Sheet)
层叠样式表,控制HTML的布局和样式
使用方式
三种使用方式
- 内联样式:在标签内使用属性stype
- 页内样式:在
<head>
标签中使用<style type="text/css"></style>
- 外部样式:使用CSS文件,使用
<link rel="stylesheet" type="text/css" href="mystyle.css">
优先级从高到低
基本语法
selector {property1: value1, ..., propertyN:valueN}
- 例如
a {color:red; text-decoration:line-through}
,将链接标签文字颜色变成红色且有横线穿过
颜色写法
p { color: #ff0000; } /*大小写无所谓*/
p { color: #f00; } /*FF0000的缩写*/
p { color: rgb(255,0,0); } /*三原色表示,0~255*/
- 颜色,写16进制,可以压缩
选择器
标签选择器
body {text-align: center}
- 上例直接使用HTML标签的选择器,就是标签选择器,元素选择器
- 注意,如果将标签改为*,表示统配所有HTML标签
id选择器
id指的是HTML标签内的属性id,例如 <div id="menu">
#
代表 id
#menu {
background-color: rgb(255, 255, 255);
width: 100%;
border-bottom: #f0f0f0 solid 1px;
margin: 0px 0px 5px 0px;
}
background-color 背景色
border-bottom 向下的边界线
margin 外边框 上 右 下 左
类选择器
类,指的是标签中的class属性,例如 <div class='main center'>
.center {
width: 80%;
margin: auto;
}
居中 margin:auto
选择器分组
分组的选择就可以使用同样的样式声明
同一个样式的时候可以使用
可以是标签,可以是ID 也可以是class
h1,h2,h3,h4,h5,h6 {
color: green;
}
层次选择器
1、后代选择器
div li {
display: inline;
}
- 所有div标签下任意层下的li标签
div#menu li {
display: inline;
}
2、子选择器
ul > li {
display: inline;
}
- 所有div标签下直接的子元素li标签
div#menu ul > li {
display: inline;
}
3、相邻兄弟选择器
兄弟标签改变属性,自己本身不改变
div.detail p + p {
color: green;
}
4、显示消失
div#menu ul > li {
display: none;
}
class为detail的div标签下任意层下的近邻p标签的下一个p标签
伪类 pseudo-classes
- 伪类能增加样式,类似于class
- 锚伪类,链接标签a的四种状态
a:link {color: red} /* 未访问的链接 */
a:visited {color: green} /* 已访问的链接 */
a:hover {color: blue} /* 鼠标移动到链接上 */
a:active {color: black} /* 选定的链接 */
- 伪类可以和css类配合使用
a.red:visited {color: #FF0000}
a:hover {
color: red;
}
a {
color: chartreuse;
text-decoration-line: none;
}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
注意,伪类和前面部分中间不要有空格
伪元素pseudo-element
伪元素能增加元素
:before
和 :after
可以在元素前后插入内容
#homepage:after
content:url(http://www.baidu.com/kczx/images/why1.png);
}
a:before {
content:"这是链接~~~";
}
属性选择器
E [ attr ] { sRules } | 具有某属性 |
E [ attr = value ] { sRules } | 具有某属性且等于value |
E [ attr ~= value ] { sRules } | 具有某属性且属性值中的一个是value |
E [ attr |= value ] { sRules } | 具有某属性且属性值使用了-,且-之前的部分是value的才匹配*[class|="main"] 能和 <div class='main-center'> 减号之前的部分匹配 |
链接具有href属性
a[href] {
color: blue;
text-decoration:line-through
}
图片alt属性为magedu_logo
img[alt=magedu_logo] {
height: 20px;
}
*[class="main center"] {
color:black
}
*[class~="center"] {
color:black
}
继承
body {
text-align: center;
color:red;
}
观察整个页面文字颜色,几乎都变成了红色。
页面中父元素中使用的样式,通过CSS继承,子孙元素将继承并使用祖先元素的属性,除非子元素重新定义了该属性
常见样式
背景 background复合属性 http://www.w3school.com.cn/css/css_background.asp
字体 font复合属性 http://www.w3school.com.cn/css/css_font.asp
- 表格border
table
{
border-collapse:collapse;
}
table,td
{
border: 1px solid black;
}
- margin外边距和padding内边距
margin: top right bottom left
padding: top right bottom left
padding:10px 5px 15px 20px; /*顺时针上右下左*/
padding:10px 5px 15px; /*上10px、左右5px、下15px*/
padding:10px 5px; /*上下10px、左右5px*/
padding:10px /*4方向全是10px*/
margin:auto /*浏览器计算外边距*/
内外边距都是顺时针设置4个方向,也可以单独设置
- 测试用HTML
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class='main center'>
<div id="menu">
<ul>
<li><a id="homepage">主页</a></li>
<li><a>Linux</a></li>
<li><a>Python</a></li>
</ul>
</div>
<a href="https://github.com/" target="_blank" title="abc">请点击</a><span>inline
span</span>
<p>
<span>biggest title</span>
<img src="https://github.githubassets.com/images/modules/site/integrators/google.png" alt="github_logo">
</p>
<div id='detail' name='detail' class="detail">
<p>title</p>
<p>content</p>
</div>
<div>
<form action="" method="POST">
<table>
<tr>
<td>用户名<input name='h' type="hidden" value="001111256"></td>
<td><input name='username' type="text" value="abc"></td>
</tr>
<tr>
<td>密码</td>
<td><input name='pwd' type="password"></td>
</tr>
<tr>
<td>性别</td>
<td><input name=gender type="radio" checked value="M">男<input name=gender type="radio"
value="F">女</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input name="interest" type="checkbox" checked value="music">音乐
<input name="interest" type="checkbox" checked value="movie">电影
</td>
</tr>
<tr>
<td>其他</td>
<td>
<textarea>
line1
line2
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input name=submit type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>