文章目录
CSS
1.介绍
层叠样式表单，是用于(增强)控制网页样式并允许样式信息与网页内容分离的一种标记性语言
2.语法
P是选择器：决定
html
页面中那些元素收影响，
font-size
是属性，可以有多个声明，需要用分号隔开，
80px
是值
P{font-size:80px
}
3.CSS和HTML结合
- 直接在html的标签的style属性上设置，即在标签
style属性上设置"key:value value;"，每个标签都要style属性，px为像素。 缺点：样式多了就代码非常庞大，可读性差，css代码没有复用性！
<divstyle="border: 1px solid red;height: 100px;width: 100px;background-color: green;text-align: center">div标签1
</div><divstyle="border: 1px solid red">div标签2</div><spanstyle="border: 1px solid green">span标签1</span><spanstyle="border: 1px solid green">span标签2</span>
- 在head标签中，使用style标签来定义自己的样式 缺点：只能在同一个页面复用，维护不方便，实际中会有成千上万个页面
<!-- 效果和上面一样--><head><metacharset="UTF-8"><title>testcss</title><!--style标签专门用来定义css样式代码，里面写的代码是css的代码--><styletype="text/css">div{/* 不管有多少个div标签都有效*/border: 1px solid red;}span{border: 1px solid green;}</style></head><body><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span></body>
- 在
head标签中通过link标签引入css代码文件，即把css样式写成一个单独的css文件，在通过link标签引入，即可多个页面复用！！最常用
<!-- 3.--><head><metacharset="UTF-8"><title>testcss</title><!-- link专门用来引入css样式代码！！！！！--><linkrel="stylesheet"type="text/css"href="testcss01.css"/></head><body><div>div标签1</div><div>div标签2</div><span>span标签1</span><span>span标签2</span></body>
testcss01.css
文件，这里写的代码和刚刚style标签里面写的代码是一样的：
div{border: 1px solid red;}span{border: 1px solid green;}
4.常见选择器
- 标签名选择器 可以决定那些标签被动的使用这个样式，这种选择器在页面引入就能用
/*
和上面一样
标签名 {
属性： 值;
...
}
*/div{border: 1px solid yellow;color: blue;font-size: 30px;}
- id选择器 可以让我们通过id属性选择性的使用这个样式。
/*
#id 属性值 {
属性: 值;
}
*/#id001{color: blue;font-size: 30px;border: 5px dotted black;}#id002{color: aqua;font-size: 10px;}/* 我们重点是怎么使用样式，我们看到样式是#xxx,我们标签属性id选择我们要用的样式就行了*/
<div id="id001">div标签111</div>
<div id="id002">div标签222</div>
- class选择器 可以通过class属性有效的选择性性取使用这个样式
/*重点怎么用
.class 属性值 {
属性： 值;
}
*/.class01{color: blueviolet;border: 3px solid black;}.class02{font-size: 10px;color: brown;}
<div class="class01">div标签333</div>
<div class="class02">div标签444</div>
<div class="class01">div标签555</div>
- 组合选择器 主要是让多个选择器共同一个css样式代码。
/*
选择器1，选择器2，选择器n {
属性: 值;
}
*//*修改class="class01",id="id001",所有的span标签*/.class01, #id001, span{color: darkblue;font-size: 50px;}
5.常用样式
我们学后端的，虽然我们不怎么写，了解一下也好。
div{color: red; 字体颜色
font-size: 20px; 字体大小
border: 1px yellow solid; 边框颜色样式 solid是实线
width: 19px; 宽度
height: 20px; 高度
background-color: aqua; 背景颜色
margin-left: auto; div标签框剧中
margin-right: auto;text-align: center; div中的文字剧中
}a{text-decoration: none; 超链接去除下划线
}td,th{border: 1px solid black;}table{border: 1px solid black;border-collapse: collapse; 将td的边框和table的边框合并
}ul{list-style: none; 去掉无需列表前面的东西，即使不同的浏览器也没问题
}
本文转载自: https://blog.csdn.net/m0_53492310/article/details/124177810
版权归原作者 苏瞳呐 所有， 如有侵权，请联系我们删除。
版权归原作者 苏瞳呐 所有， 如有侵权，请联系我们删除。