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.如果样式前面有黄色感叹号,则是样式属性书写错误。