荐 CSS初学习总结
CSS初学习总结
问：什么是CSS？
答：CSS全称为Cascading Style Sheets，层叠样式表，在网页制作时采用CSS技术，可以有效地美化、装饰页面。如果说HTML是毛胚房，那么CSS就相当于装修工，JS则是给房子走了水电，从而达到交互效果。
1、学习CSS就是学习选择器和CSS属性。
学习CSS就是学习选择器和CSS属性。
选择器就是用来选择页面上某个元素的。
1.1基本选择器有哪些？
- 标签选择器：简单的选择器，就是选中页面中同类型的标签。
- ID选择器：想要选中某一个标签，则可以实用ID选择器。先给标签起个id名，然后通过#id名选中。通常ID选择器是为了让JS来选中的。
- CLASS选择器：同上。先给标签起个class名，然后通过.class名选中。项目中使用class选择器是非常多的，CLASS选择器是为了让css来选中的。
<!DOCTYPE html>
<html lang="en">
<head>
<title>基本选择器</title>
<style>
/* 标签选择器 ：选中页面上所有的p标签*/
span{color: plum;}
/* ID选择器 ：先给标签起个ID名 然后通过#ID名选中*/
#one{color: pink;}
/* CLASS选择器：先给标签起个class名,然后通过.class名选中 */
.two{color:skyblue;}
</style>
</head>
<body>
<span>哈哈哈哈</span>
<span>一起做练习吧！</span>
<p id="one">这是一个p标签,把字体颜色设置为pink</p>
<p class="two">这是一个p标签,把字体颜色设置为skyblue</p>
</body>
</html>1.2高级选择器有哪些？
- 后代选择器：可以保证选中某个元素内部的某些元素。
- 交集选择器：p.box就是交集选择器，必须是p标签，并且p标签中有class="box"这个类。
- 并集选择器选择器：一次性选中多个元素，多个选择器中间使用逗号隔开。
- 通配符选择器：*{}表示选中所有选择器，包含body、html标签。
<!DOCTYPE html>
<html lang="en">
<head>
<title>高级选择器</title>
<style>
/* 后代选择器：空格表示后代,看到空格就立即想到后代 */
.grandpa .father .son{ color: slateblue;}
/* 交集选择器：p和.box中间没有空格，p .box就表示后代了 */
p.box{color: yellowgreen;}
/* 并集选择器：一次性选中多个元素,看到逗号，就想到并集选择器 */
.grandpa .father .son,p.box,div.box{color: tomato;}
/* 通配符选择器：*{}表示选中所有选择器 包含body html标签 */
*{margin: 0;padding: 0;}
</style>
</head>
<body>
<div class="grandpa">
<div class="father">
<div class="son">
注意：后代不一定是儿子，可以是孙子，曾孙子，重孙子...都行。
</div>
</div>
</div>
<p>这是一个p标签</p>
<p class="box">这是第二个p标签</p>
<div class="box">这是一个div标签</div>
</body>
</html>1.3与文字设置相关的属性
- 设置文字颜色：color
- 设置文字是否倾斜：font-style
- 设置文字是否加粗：font-weight
- 设置文字大小：font-size
- 设置文本行高：line-height
- 设置文字字体：font-family
- 设置文本修饰线：text-decoration
- 综合属性：font
<!DOCTYPE html>
<html lang="en">
<head>
<title>文字相关的设置</title>
<style>
*{margin: 0;padding: 0;}
span{
/* 设置字体倾斜 */
font-style: italic;
/* 设置字体加粗 */
font-weight: bold;
/* 设置总体大小为20px */
font-size: 20px;
/* 设置行高为字体大小的2倍 */
line-height: 2;
/* 设置文字字体 */
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* 给文本添加下划线 */
text-decoration: underline;
/* 设置字体颜色 */
color: yellowgreen;
}
p{
/* font综合属性：font-style font-weight font-size/line-height font-family*/
font: italic bold 25px/2 Cambria, Cochin, Georgia, Times; }
</style>
</head>
<body>
<span>这是我的第一篇博客<span>
<p>作为小白如果我写的有不正确的，欢迎大家指正。</p>
</body>
</html>1.4盒子模型
问：什么是盒子？
答： 每一个标签都是一个个盒子，只要是标签就是盒子。我们平常所
说的盒子模型很重要，指的是设置盒子模型的六大属性很重要。学习盒子模型，就是学习上边的六大属性！！！
一个盒子由如下几个部分组成：
- 内容content(width/height)
- 内填充padding(上下左右)
- 边框border(上下左右)
- 外填充margin(上下左右)
- 背景 背景颜色和背景图片
盒子模型六大属性：
- width 表示盒子内容区域的宽度
- height 表示盒子内容区域的高度
- padding 表示盒子内容填充
- border 表示盒子的边框
- border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）
- margin 表示盒子的外边距
- background 表示盒子的背景 包含背景颜色和背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<title>盒子模型</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid red;
padding: 10px;
margin: 10px;
/* 背景可以充满内容和padding区域 */
background: pink;
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
</html>1.5 内边距与外边距
1.5.1padding：内填充，也叫做补白，也叫做内边距。
表示内容与边框之间的距离。分四个方向。
可以分开设置，如下：
padding-top: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 30px;
<!DOCTYPE html>
<html lang="en">
<head>
<title>内边距</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid red;
padding-top: 10px;
padding-right: 20px;
padding-left: 40px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
</html>也可同步设置：
只写一个padding，后面可以跟上1个值，2个值，3个值，4个值。
1个值：padding: 10px; 表示4个方向的内填充都是10px。
2个值：padding: 10px 20px; 第1个值表示上下，第2个值表示左右。 3个值：padding: 10px 20px 30px; 第1个值表示上，第2个值表示左右， 第3个值表示下。
4个值：padding: 10px 20px 30px 40px; 顺序是上、右、下、左。
1.5.2margin:外填充，也叫做外边距。
表示边框与边框之间的距离。分四个方向。
可以分开设置，如下：
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
margin-bottom: 30px;
<!DOCTYPE html>
<html lang="en">
<head>
<title>外边距</title>
<style>
.box{
width: 100px;
height: 100px;
border: 2px solid red;
margin-top: 10px;
padding-right: 20px;
padding-left: 40px;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
</html>也可同步设置：
可以只写一个margin，后面可以跟上1个值，2个值，3个值，4个值。
1个值：margin: 10px; 表示4个方向的内填充都是10px。
2个值：margin: 10px 20px; 第1个值表示上下，第2个值表示左右。
3个值：margin: 10px 20px 30px; 第1个值表示上，第2个值表示左右， 第3个值表示下 。
4个值：margin: 10px 20px 30px 40px; 顺序是上、右、下、左。
大多数标签都有默认的padding和margin，不利于我们布局和美化页面，所以： *{margin：0；padding：0} 经典代码。
1.6 CSS颜色表示法
css中很多属性都需要使用颜色来表示。
颜色表示法：
- 单词表示 pink skyblue yellowgreen
- rgb表示法 三原色：rgb(red green blue)任何颜色都能使用三原色组成
- 16进制表示法
单词表示：
不能表示所有的颜色，人不能记住那么多的颜色单词，只能记住常见的
rgb表示法：
每一种颜色的取值是0~255
rgb(0，0，0)表示黑色
rgb(255,255,255)表示白色
rgba:a表示透明度，取值0~1，0表示完全透明，1表示不透明
红色：color:rgba(255, 0, 0, 1);
绿色：color:rgba(0, 255, 0, 1);
蓝色：color:rgba(0, 0, 255, 1);
黑色：color:rgba(0, 0, 0, 1);
白色：color:rgba(255, 255, 255, 1); …
使用rgb可以表示255255255=16,581,375种颜色
16进制表示：
#打头。如：#_ _ _ _ _ _ 前两位是红 中间两位是绿 后两位是蓝
16进制：0 1 2 3 4 5 6 7 8 9 a b c d e f
红色：#ff0000
绿色：#00ff00
蓝色：#0000ff
黑色：#000000
白色：#ffffff …
opacity:0;透明度
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS颜色表示法</title>
<style>
h1{color: skyblue;}
h2{color:rgba(255, 100, 100, 1);}
h3{color: #bf8dd3;}
</style>
</head>
<body>
<h1>这是一个标题标签</h1>
<h2>这是一个二级标题标签</h2>
<h2>这是一个三级标题标签</h2>
</body>
</html>本文地址：https://blog.csdn.net/Zxt0518/article/details/107269423