我要评论
CSS的基本使用--笔记回顾
1、CSS的引入_内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.内联样式：Inline -->
<!-- <h1 style="属性名：属性值；属性名：属性值">网页的标题</h1> -->
<h1 style="font-size: 50px;color: red;">网页的标题</h1>
<p>网页的段落</p>
<a href="#">百度一下</a>
<div style="font-size: 20px;background-color: red;">哈哈哈</div>
</body>
</html>
2、CSS引入文档样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*
快捷键：ctrl+/
选择器{
属性名：属性值
} */
/* 单个元素选择器 */
h1{
font-size: 50px;
color: red;
}
div{
font-size: 20px;
background-color: red;
}
/* 类选择器 */
.red{
color: red;
}
/* 并集选择器 */
/* h1,p,a{
color: red;
} */
</style>
</head>
<body>
<!-- 文档样式表：document style sheet -->
<!-- 开发网页特性：结构和样式分离 -->
<h1>网页的标题</h1>
<p class="red">段落内容</p>
<a class="red" href="#">百度一下</a>
<div>呵呵呵</div>
</body>
</html>
3、CSS外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1.link引入样式：rel="stylesheet" -->
<!-- 不太重要的放上面，因为下面的会覆盖上面的 -->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/style.css">
<!-- 2.style -> @import -->
<!-- 不建议使用import引入css文件 -->
<style>
@import url(./css/base.css);
@import url(./css/style.css);
</style>
</head>
<body>
<!-- 外部样式表：external style sheet -->
<h1>网页标题</h1>
<p>段落内容</p>
<a href="#">百度一下</a>
<div>呵呵呵</div>
</body>
</html>=
4、CSS选择器_通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 通配选择器 */
/* 尽量不用，影响效率 */
/* *{
color: red;
background-color: red;
} */
div,p,span,strong{
background-color: red;
}
*{
background-color: white;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
<strong>strong</strong>
</body>
</html>
5、CSS选择器_元素选规器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
color: pink;
}
p{
color:yellow;
}
a{
color: green;
}
</style>
<body>
<div>div1</div>
<p>p</p>
<a href="#">a</a>
<div>div2</div>
<div>div3</div>
</body>
</html>
6、CSS选择器_类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.box1{
color: pink;
}
.box2{
color: green;
}
.box3{
color: purple;
}
.large-font{
font-size: 25px;
}
</style>
<body>
<div class="box1">div1</div>
<p class="large-font">p1</p>
<a href="#">a</a>
<!-- 强调:一个元素是可以有多个类的，多个类以空格进行分割 -->
<div class="box2 large-font">div2</div>
<div class="box3">div3</div>
<div class="box2">div4</div>
<p>p2</p>
<!-- 类的名字的规范
1.尽量见名知意
2.当多个单词时，以什么样方式连接
- 连接：中划线（连字符） large-font
_ 连接：下划线 large_font
驼峰连接 laegeFont
-->
<!-- 驼峰标识
小驼峰：第一个单词第一个字母小写，后面遇到单词首字母就大写
html->class
js函数名
大驼峰：所有单词首字母都大写
js中定义类的名字
-->
</body>
</html>
7、CSS选择器_id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#header{
color: red;
}
#content{
color: blue;
}
#product{
color: yellow ;
}
#footer{
color: brown;
}
</style>
</head>
<body>
<!-- id用大门类划分 -->
<!-- 强调：id不要重复 -->
<div id="header">头部</div>
<div id="contene">内容</div>
<div id="product">商品</div>
<div id="footer"></div>
</body>
</html>
8、开发中结构和样式分离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.product-item{
width: 100px;
}
</style>
</head>
<body>
<!-- 注意：网页图标支持的图片格式是ico、png -->
<!-- 16*16 24*24 32*32 -->
<img class="product-item" src="../img/test.webp" alt="">
</body>
</html>
9、最常见的CSS属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 1.color:前景色 */
.box1{
color: green;
text-decoration:underlin ;
/* border: 5px soild; */
border-width: 10px;
border-style: solid;
}
/* 2.font-size:文字的大小 */
.box2{
font-size: 30px;
}
/* 3.background-color:背景颜色 */
.box3{
background-color: greenyellow;
}
.tiltle3{
background-color: skyblue;
}
/* 4.width/height:宽度和高度 */
.box4{
background-color: orange;
width: 300px;
height: 300px;
}
.title4{
background-color: purple;
/* 无效的：宽度和高度不适用于非替换行内元素 */
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!-- 1.color:前景色 -->
<div class="box1">hahahahaha</div>
<!-- 2.font-size:文字的大小 -->
<div class="box2">hehehhehehehe</div>
<!-- 3.background-color:背景颜色 -->
<div class="box3">hihiiihihihihi</div>
<span class="title3">hehiehiehiehiehei</span>
<span class="title">aaaa</span>
<!-- 4.width/height:宽度和高度 -->
<div class="box4">xiixixixixiix</div>
<span class="title4">bbbb</span>
</body>
</html>
10、颜色的设置方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
/* background-color: rgb(0,0,0); */
/* alpha:0~1 */
background-color: rgba(0,255,0,0.5);
/* 转成十六进制 */
/* background-color: #00ff00; */
/* background-color: transparent;等价于rgba（0，0，0，0） ，完全透明*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
本文地址：https://blog.csdn.net/qq_47000934/article/details/109273745
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论