css笔记

最新推荐文章于 2025-05-10 16:22:55 发布

高国才

最新推荐文章于 2025-05-10 16:22:55 发布

阅读量321

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/weixin_41507897/article/details/79565479

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括选择器的使用、常用属性的应用、盒子模型的理解及定位方式的掌握等内容，适合初学者快速入门。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.css入门

-->

2.css选择器（1）

<!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-size:24px;
color:#F00
}

/*类选择器*/
.c1{
font-size:18px;
color:#30C
}

/*id选择器*/
#d1{
font-size:30px;
color:#CF0
}

</style>

</head>
<body>

<div class="c1">div1的内容</div>
<div>div2的内容</div>
<div class="c1">div3的内容</div>
<div id="d1">div4的内容</div>

</body>

</html>

3.css选择器（2）

<!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">
/*并集选择器*/
.c1,#d1{
font-size:24px;
color:#F00
}

/*交集选择器*/
div span{
font-size:18px;
color:#6CF
}
/*通用选择器*/
/**{
font-size:18px;
color:#6CF
}
*/

/*伪类选择器*/
a:link{
font-size:16px;
color:#F0F
}
a:visited{
font-size:24px;
color:#999
}
a:hover{
font-size:24px;
color:#CF0;
text_decoraction:none;
}
a:active{
font-size:36px;
color:#F00;
}
</style>

</head>
<body>
<div class="c1">div1的内容<span>div内部的span内容</span></div>
<div>div2的内容</div>
<div class="c1">div3的内容</div>
<div id="d1">div4的内容</div>
<span>外面的span内容</span><br/>
<a href="">超链接</a>
</body>

</html>

4.css常用属性（文本）

</html>

5.css属性（背景）

background-position:center,left;

/*简写属性*/
/*
background:
*/

}

</style>

</head>
<body>
</body>

</html>

6.css属性（边框）

</html>

7.css属性（表格）

</body></html>

8.css属性（列表）

</html>

9.css属性（字体）

</html>

10.盒子模型（css+div）

<body>

</html>

11.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{
width:100px;
height:100px;
border:3px solid #000;
}

#div1{
background-color:#F60;
}

#div2{

background-color:#3F3;
/*相对定位*/
position:relative;
left:30px;
top:30px;
}

#div3{
background-color:#09F;
/*绝对定位*/
position:absolute;
left:60px;
top:60px;
}

#div4{

width:200px;
height:200px;
border:3px solid #F33;
background-color:#FF9;
/*绝对定位*/
/*
position:absolute;
left:500px;
top:200px;
*/

/*固定定位*/
position:fixed;
left:500px;
top:200px;
}

</style>

</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</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/>
<div id="div4">立即咨询</div>
</body>
</html>