CSS的概念
CSS(Cascade Style Sheet)层叠样式表
CSS 能够决定页面的样式,对网页的配色以及元素的布局进行精确控制。
CSS与html的结合方式
在标签上加入style属性
<!-- 属性值为CSS样式代码 -->
<p style="color: red;">aaa</p>
在页面的head标签中,书写一个style标签
<html>
<head>
<title></title>
<!-- 在style标签中书写css代码 -->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
</body>
</html>
在页面head标签中填写link标签
<html>
<head>
<title></title>
<!-- type:mime类型 rel:类型 href:css文件路径(.css文件) -->
<link type="text/css" rel="stylesheet" href="#" />
</head>
<body>
</body>
</html>
CSS的选择器
元素选择器
<!-- 语法:元素名称{
属性键:属性值;
}
-->
<style type="text/css">
html {
color:black;
}
h1 {
color:blue;
}
</style>
<body>
<h1>标题标签</h1>
</body>
ID选择器
<!-- ID属性唯一标识符,要确保页面当中id属性的唯一性
语法:#ID{
属性键:属性值;
}
-->
<style type="text/css">
#tb{
background-color: red;
}
</style>
<body>
<talbe id="tb">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
类选择器
<!-- class属性可以随意重复
语法:.class名称{
属性键:属性值;
}
-->
<style type="text/css">
.tb{
background-color: red;
}
</style>
<body>
<talbe class="tb">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
选择器分组
<!-- 语法:选择器1,选择器2...{
属性键:属性值;
}
-->
<style type="text/css">
.t1,#t2{
background-color: red;
}
</style>
<body>
<talbe>
<tr id="t1">
<td></td>
<td></td>
</tr>
<tr class="t2">
<td></td>
<td></td>
</tr>
</table>
</body>
伪类选择器
<!-- 指的是选择的某个标签的某种状态。常见状态有4种,a标签最全:
l link 没有点击过的状态
v visited 访问过的状态
h hover 鼠标悬浮
a active 激活状态(鼠标点下去没有弹起)
-->
<style type="text/css">
a:link {
color: #FF0000;
} /* 未访问的链接 */
a:visited {
color: #00FF00;
} /* 已访问的链接 */
a:hover {
color: #FF00FF;
} /* 鼠标移动到链接上 */
a:active {
color: #0000FF;
} /* 选定的链接 */
</style>
<body>
<a href="#">a标签的不同状态</a>
</body>
CSS的基本语法
选择器{
属性键:属性值;
属性键:属性值1 属性值2 ...;
}
注释:与java中多行注释相同 /*注释内容*/
CSS的常用属性
单位(了解)
颜色单位(color units)
#RRGGBB rgb(R,G,B) color name
长度单位(Length units)
em px像素(常用)
字体属性
color → 文字颜色
font-family → 文字样式
font-size → 文字大小
font-style → 文字样式(斜体)
font-weight → 文字加粗
font → 复合属性
背景属性
background-color → 背景色
background-image → 背景图
background-repeat → 图片重复
background → 复合属性