css

最新推荐文章于 2024-01-15 00:00:00 发布

qq_1031774040

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量71

点赞数

本文链接：https://blog.csdn.net/qq_40993674/article/details/82503794

版权

CSS的概念
CSS（Cascade Style Sheet）层叠样式表

CSS 能够决定页面的样式，对网页的配色以及元素的布局进行精确控制。

CSS与html的结合方式
在标签上加入style属性

<p style="color: red;">aaa</p>

在页面的head标签中，书写一个style标签
<html>
<head>
<title></title>

<style type="text/css">
p{
color: blue;
}
</style>
</head>

<body>

</body>
</html>

在页面head标签中填写link标签
<html>
<head>
<title></title>

<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选择器

<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>

类选择器

<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>

选择器分组

<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>

伪类选择器

<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 → 复合属性

qq_1031774040

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css

CSS的概念CSS（Cascade Style Sheet）层叠样式表CSS 能够决定页面的样式，对网页的配色以及元素的布局进行精确控制。CSS与html的结合方式在标签上加入style属性&lt;!-- 属性值为CSS样式代码 --&gt;&lt;p style="color: red;"&gt;aaa&lt;/p&gt;在页面的head标签中，书写一个style标签&l...
复制链接

扫一扫