CSS-01
1.CSS简介
CSS的主要使用场景就是美化网页，布局页面的。
1.HTML的局限性：
- HTML只关注内容的语义，比如< h1 >表明这是一个大标题，< p >表示这是一个段落，< img >表示这儿有一个图片。
- 虽然HTML可以做简单的样式，但是会代码结构会非常繁琐和臃肿。
2.CSS-网页的美容师
-
CSS是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为CSS样式表或级联样式表。
-
CSS也是一种标记语言，主要用于设置HTML页面中的文本内容：字体，大小，对齐方式等、图片的外形：宽高，边框样式，边距等、以及版面的布局和外观显示样式。
-
CSS让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。
3.CSS最大价值：
- 就是让HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。
4.语法规范：
- 1.样式写在
<head>标签中的的<style>中 - 2.CSS样式主要由两部分组成：选择器以及一条或者多条样式键值对。
- 3.多个键值对用
;隔开<head> <style> p { color: red; font-size: 50px; } </style> </head> <body> <p>有点意思</p> </body>
2.CSS基础选择器
选择器分为基础选择器和复合选择器两大类，我们这里先学习基础选择器。
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：标签选择器，类选择器，id选择器和通配符选择器。
2.1.标签选择器：
为某一种标签都设置为某一样式，粒度太粗，无法进行差异化设置样式
<head>
<style>
p {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
2.2.类选择器：
-
1.先写一个类（样式）。
<head> <style> .color1 { color: green; } .color2 { color: pink; } </style> </head> -
2.在标签中调用这个类。
<body> <p>有点意思</p> <ul> <li class="color">1111</li> <li class="color2">2222</li> <li>3333</li> </ul> </body> -
3.注意：
长名称可以使用中横线来为选择器命名：.xxx-xxx
不要用纯数字，中文等命名，尽量使用英文字母来表示。 -
4.使用类选择器画盒子
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red { width: 100px; height: 100px; background-color: red; } .green { width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="red"></div> <div class="green"></div> <div class="red"></div> </body> -
5.类选择器：多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签。简单的理解就是一个标签有多个名字。
5.1.多类名使用方式：class属性中的多个类名必须用空格分开。<div class="red font20">亚瑟</div>5.2.多类名的好处：抽取公共的样式部分，放到一个统一的一个类中，方便修改，节省代码。
2.3.Id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
- 1.语法
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #font { font-size: 100px; color: red; } </style> </head> <body> <p id="font">牛皮</p> </body> - id选择器和类选择器的区别：
1.类选择器class好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
2.id选择器好比人的身份证号，而且标签元素的id属性在整个HTML页面中必须是唯一的，所以id选择器就只能被一个标签元素调用。
3.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素，经常搭配JavaScript。
2.4.通配符选择器
在CSS中，通配符选择器使用*定义，意为选取页面中的所有标签元素。不用调用这个选择器，直接作用在所有的标签上。
* {
background: pink;
}
一般使用场景：内外边距
* {
margin: 0;
padding: 0;
}
2.5.选择器小结
3.CSS字体属性
CSS Fonts（字体）属性用于定义字体系列，大小，粗细和文字样式（如斜体）。
3.1.字体系列：
1.CSS使用font-family属性定义文本的字体系列。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 这是一个标签选择器*/
body {
font-family: '宋体', Arial, 'Times New Roman';
}
</style>
</head>
<body>
<h2>标题</h2>
<p id="font">牛皮</p>
</body>
2.注意事项：
- 一个样式选择器中可以定义多个字体：各种字体之间必须必须用逗号隔开。意思是先用第一个字体，如果操作系统没有，用后面一个，都没有用浏览器默认的。
- 尽量用默认的字体：为了各种情况的兼容性，谷歌默认的是微软雅黑。
- 一般情况下，如果是多个单词组成的一个字体，用单引号括住，比如
'Microsoft YaHei'<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 这是一个标签选择器*/ body { font-size: 20px; } h2 { font-size: 20px; } </style> </head> <body> <h2>标题</h2> <p id="font">牛皮</p> </body> - 一般将font-family属性放在body标签选择器中：作用在整个body域中。
3.2.字体大小
CSS使用font-size属性定义字体大小：
- px像素大小是我们网页最常使用的单位。
- 谷歌浏览器默认的文字大小是16px。
- 不同浏览器可能默认的文字大小不一致，我们在开发页面时尽量给一个明确的大小，这样就统一了。
- 可以给body指定整个页面文字的大小。
- 标题标签比较特殊：要单独指定。
3.3.字体粗细
CSS使用font-weight属性设置文本字体的粗细。
1.让一个加粗标签（比如h和strong）不加粗
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
font-size: 20px;
font-weight: 400;
}
</style>
</head>
<body>
<h2>标题</h2>
</body>
2.属性值
- normal：默认值，不加粗的。等价于400.
- bold：定义粗体，等价于700.
- 100-900：400等同于normal，而700等同于bold，这个数字后面不跟单位。
- 实际开发中，更喜欢用数字表示粗细。
3.4.文字样式：斜体
CSS使用font-style属性设置文本的风格。
常用属性值：
- normal：默认值，浏览器会显示标准的字体样式。
- italic：浏览器会显示斜体的字体样式。
场景：让一个倾斜的标签不倾斜。
- 我们很少给字体加斜体，反而经常给斜体标签（em，i）改为不倾斜字体。
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> em { font-style: normal; } </style> </head> <body> <em>我是斜的</em> </body>
3.5.字体复合属性
字体复合属性可以把以上文字样式综合来写，这样可以更节约代码。
注意：顺序不能变。
font: font-style font-weight font-size/line-height font-family
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
/*
font-family: 'Times New Roman', Times, serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
*/
font: italic bold 20px 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<p>我最牛牛牛牛牛牛牛！</p>
</body>
注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
- 不需要设置的属性可以省略去默认值，但必须保留font-size和font-family属性，否则font属性将不起作用。
3.6.字体属性小结
4.CSS文本属性
CSS Text文本属性可以定义文本的外观，比如文本的颜色，对齐方式，缩进，行间距等等。
1.颜色
div {
/* color: red; */
color: rgb(73, 32, 100);
}
- rgb：red，green，blue。类似一个取色器。
2.对齐文本
-
text-align属性用于设置元素内文本内容的
水平对齐方式div { text-align: center; } -
常见属性值：
left：左对齐（默认值）
right：右对齐
center：居中对齐。
3.装饰文本
- text-decoration属性定义文本的修饰：下划线，删除线，上划线
div { text-decoration: underline; } - 常见属性值：
none：默认，没有装饰线
underline：秀安县，链接a标签自带下划线。
overline：上划线
line-through：删除线。 - none：默认，没有装饰线。最常用，用来取消下划线。
<head> <title>Document</title> <style> a { text-decoration: none; } </style> </head> <body> <a href="www.baidu.com">我的下滑线被取消了</a> </body>
4.文本缩进
- text-indent属性用来指定文本的
第一行的缩进，通常是将段落的首行缩进。<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { text-indent: 2em; } </style> </head> <body> <div>的悲观锁！！另外，在这里说下，很多作处著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出。</div> <div>初学者（包括我自己）初期学习多线程时都被视频带偏了...虽然我一直认为培训班的视频是最适合非科班零基础入门的，但是在多线程方面，无一例外都讲得比较糟糕。有一点感触很深：很多人学多线程，并不是死在后面的volatile、ReentrantLock或者Executor线程池，而是最初期在“什么是锁”这个问题上就扑街了。什么是“锁”？“锁”到底长啥样？它锁定的是线程代码还是其他什么东西？在我看来，这个问题不搞清楚，后面的内容根本学不明白。而一旦搞清楚这些概念，后面很多问题其实也就迎刃而解。其实“锁”本身是个对象，synchronized这个关键字不是“锁”。硬要说</div> <div>者：编程指北链接：https://www.zhihu.com/question/277507333/answer/1810652170来源：知乎</div> </body> - 属性值可以是像素px，可以是相对长度em。em就是当前元素的1个文字的大小像素。
5.行间距
-
line-height属性用于设置行间的距离（行高），控制文字行于行之间的距离。
p { line-height: 20px; } -
什么是行间距：
文本的大小是固定不变的，通过上间距和下间距来控制行间距。
-
注意点：
1.文字的默认大小：16px。
2.line-height默认大小：normal，一般是文字默认大小的1.3倍左右。16*1.3=20.08。
3.所以如果为文字大小设置line-height: 16px，字体行高反而会变小。
4.设置line-height: 20px;，那么文字16px，上边距2px，下边距2px。<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { text-indent: 2em; line-height: 20px; } </style> </head> <body> <div>初学者（包括我自己）初期学习多线程时都被视频带偏了。</div> </body>
5.CSS的引入方式
CSS不是只能写到head标签中，根据CSS样式书写的位置（即引入的方式）不同，CSS样式表可以分为三大类。
-
1.内部样式表（嵌入式）
内部样式表，内嵌样式表式写到html页面内部，和html页面在一起。放到一个单独的style标签中。<style> div { text-indent: 2em; line-height: 20px; } </style> -
2.行内样式表（行内式）
行内样式表（内联样式表）是在元素
标签内部的style属性设定CSS样式，适合修改简单样式。<div style="color: red; font-size: 12px;">青春常在。</div> -
3.外部样式表（链接式）
实际开发中都死外部样式表，适用于样式比较多的情况，核心是：样式单独写到CSS文件中，之后再把CSS文件引入到HTML页面中。
1.新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
2.在HTML页面中，使用<link>标签引入这个文件。
link rel="stylesheet" href="css路径"
6.Chrome调试工具
Chrome浏览器提供了一个非常好用的调试工具，可以用来调试我们的HTML结构和CSSyangshi1.
- 1.左边是HTML元素结构，右边是CSS样式。
- 2.右边的CSS样式可以改动数字。
- 3.如果样式前面有黄色感叹号，则是样式属性书写错误。
1139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
