css
一.基础认知
1.1.css介绍
css：cascading style sheets：层叠样式表
用于修饰HTML标签命令
1.2css的引入方式
- 内嵌式：css写在style标签中，style标签写在head标签中，写在title标签下面
输出：
样例html代码
<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>
p{
color: brown;
}
</style>
</head>
<body>
<p>这是一个标签</p>
</body>- 外联式：css标签单独写在一个.css文件中，需要通过link标签在网页中引入
样例css文件代码
p{
color: brown;
}样例html文件代码
<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>
<link rel="stylesheet" href="./tt.css">
</head>
<body>
<p>这是一个标签</p>
</body>- 行内式：css写在标签的style属性中，新手不推荐，之后会配合js使用
样例代码
<body>
<p style="color: brown;">这是一个标签</p>
</body>
二.基础选择器
1.1 选择器的作用
- 选择页面中对应的标签（找它），方便后续设置样式（改它）
1.2 标签选择器
- 结构：标签名：{css属性名：css属性值；}
- 通过标签名找到页面中的这类标签，根据css属性进行标签样式的对应
- 注意：标签选择器选择的是一类标签而不是一个标签；标签选择器无论嵌套多深，都能找到对应的标签
-
<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> p { color: brown; } div { color: blueviolet; } </style> </head> <body> <p>这是一个p标签</p> <p>这是一个p标签</p> <div>我是div</div> <div>我是div</div> <div><p>如果</p></div> </body>
输出：
1.3 类选择器
- 结构： .类名{css属性名：属性值；}
- 通过类名找到页面中所有带这个类名的标签，设置样式。
- 注意：所有标签上都有clss属性，clss属性的属性值称为类名（类似于名字）；类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；一个标签可以同时有多个类名，类名之间以空格隔开；类名可以重复，一个类选择器可以同时选中多个标签。
样例代码
<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{ color: red; } .yellow{ color: yellow; } .pink{ color:pink; } .big{ font-size: 30px; } </style> </head> <body> <p class="red big">大红</p> <p class="yellow">小黄</p> <p class="pink">小粉</p> <p class="red">小红</p> </body>
输出：
1.4 id选择器
- 结构： #id属性值{css属性名：属性值；}
- 通过id属性值，找到页面中带有这个id属性值的标签，设置样式。
- 注意：所有标签都有id属性；id属性值类似于身份证号码，在一个页面中是唯一的不可重复的！；一个标签上只能有一个id属性值；一个id选择器只能选中一个标签。
- id选择器在每个页面中只能选中一个标签，类选择器可以选中多个。id选择器比较少用，通常id选择器会配合js使用。
样例代码
输出：<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{ color: red; } #green{ color: green; } </style> </head> <body> <p id="red">红果果</p> <p id="green">绿泡泡</p> </body>
输出：该样例用类选择器也可用。
1.5 通配符选择器
- 结构： *{css属性名：css属性值；}
- 作用：找到页面中所有的标签，设置样式
- 注意：开发中很少使用；在基础班小页面中可能会用于去除标签默认的margin和padding
样例代码
输出：<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> *{ color: red; } </style> </head> <body> <p>hi</p> <h1>bb</h1> <h2>pp</h2> </body>
三、字体和文本的样式
1.字体样式
1.1字体大小属性 font-size
- 取值：数字+px
- 注意：谷歌浏览器的默认字体大小是16px；单位需要设置否则无效
样例代码
输出：<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> p{ font-size: 60px; } </style> </head> <body> <p>我是一个标签</p> 我是正常 </body>
1.2字体粗细属性 font-weight
- 取值：
- 注意：不是所有字体都提供了九种粗细，因此部分取值页面中无变化；实际开发中以正常normal和加粗bold两种取值的应用最多
代码样例
输出:<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> .one{ font-weight: 100; } .bold{ font-weight: bold; } .normal{ font-weight: normal; } </style> </head> <body> <p class="one">我是一个100标签</p> <p class="bold">我是一个bold标签</p> <p class="normal">我是正常</p> </body>
1.3字体样式-是否倾斜属性 font-style
- 取值：
样例代码
输出：<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> .itali{ font-style: italic; } .normal{ font-style: normal; } </style> </head> <body> <p class="itali">我歪了</p> <p class="normal">我正直</p> </body>
1.4常见字体系列
1.5 字体系列 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> /* 每个类都选择了三个字体，但由于xixi和haha字体不存在，所以最后显示的是宋体和隶书 */ .ran1{ font-family:xixi,haha,宋体; } .ran2{ font-family:xixi,haha,隶书; } </style> </head> <body> <p class="ran1">我宋体</p> <p class="ran2">我隶书</p> </body>- 输出：
1.6 font属性的连写
- 属性名：font，属性值：各个属性值以空格隔开
- 顺序要求：swsf（稍微舒服）：style weight size family
- 可省略前两个（style和weight）属性，默认设为默认值。但后两个不可省略
- 注意：如果同时需要设置单独和连写形式，要么把单独的样式写在连写的下面；要么把单独的样式写在连写的里面。
2.文本样式
2.1文本缩进 text-indent
- 属性名：text-indent
- 取值：数字+px或数字+em(推荐，1em等于当前标签的front-size的大小)
样例代码
输出：<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> .px { text-indent: 2px; } .em { text-indent: 2em; } </style> </head> <body> <p class="none">叫我爸爸</p> <p class="px">叫我爸爸px</p> <p class="em">叫我爸爸em</p> </body>
2.2文本书评对齐方式 text-align
- 属性名：text-align
- 取值：
- 注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素，比如body）设置
- text-align:center;不仅可以让文本水平居中，还可以让span标签、a标签、input标签、img标签水平居中。如果要让以上标签都水平居中，text-align：center需要给以上标签的父元素设置。
样例代码
<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{ text-align: center; } </style> </head> <body> <p>我是ppp</p> <div>我是div</div> </body>- 输出：
2.3 文本修饰text-decoration
- 属性名：text-decoration
- 取值：
- 注意：开发中会使用text-decoration:none;清楚a标签默认的下划线
代码示例
<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> p{ text-decoration: underline; } div{ text-decoration: overline; } </style> </head> <body> <p>大脚丫子</p> <div>小脚丫子</div> </body>
文本样式总结：
2.4水平居中的方法 margin：0 auto
- 上面讲了用text-align将文本水平居中
- 我们可用margin:0 auto让div、p、h这些大盒子水平居中
- 注意：如果要让div、p、h这写大盒子水平居中，直接给当前元素设置即可
- margin:0 auto一般针对于固定宽度的盒子，如果此时没有给大盒子设置宽度，会默认占满父元素的宽度
代码示例
输出;<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> .father{ width: 400px; height: 400px; background-color: aqua; margin: 0 auto; } .son{ width: 200px; height: 200px; background-color: beige; margin:0 auto; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body>
3.line-height行高
3.1行高
(文本高度就是font-size。行高减去文本高度后除以2的结果就是上下间距)
- 作用：控制行间距（给一行上下增加间距）
- 属性名：line-height
- 取值：
- 应用1：让单行文本垂直居中可以设置Line-height：文字父元素高度
- 应用2：网页精准布局时，会设置line-height:1；可以取消上下间距（因为1代表行高为1个字的高度。那么用行高减去字高就为0即无间距）
- 行高与font连写的注意点
-
-
-
- 1：如果同时设置了行高和font连写，注意覆盖问题（如果先写行高再写font属性，就会出问题。因为font属性里面给行高留了位置，如果后写font连写，那么font连写中会用默认的行高值覆盖上面设置的行高）。所以line-height写在font连写的下面或者写在font连写的里面。
- 2.带line-height的font连写：font : style weight size/line-height 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> div{ width: 400px; height: 400px; background-color: aqua; font-size: 20px; line-height: 400px; } </style> </head> <body> <div> 我是个盒子 </div> </body>
拓展：颜色的常见取值
- rgb表示法：color：rgb（ 第一个值，第二个值 ，第三个值 ）;三个值分别表示三原色红绿蓝的值。
样例代码
<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{
background-color: aquamarine;
font:italic 600 400px 宋体;
color:rgb(255, 0, 0);
}
</style>
</head>
<body>
<div>
我是个盒子
</div>
</body>输出：
- rgba表示法：比rgb多一个a，a表示透明度，a的取值为0（透明）~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> div{ background-color: aquamarine; font:italic 600 400px 宋体; color:rgba(255, 0, 0,0.2); } </style> </head> <body> <div> 我是个盒子 </div> </body>
- 十六进制表示法
- 由六位数字表示
，两个数字为一组，每位数字的取值范围为0~9、a、b、c、d、e、f - 如果三组中每组数字都相同，可以简写每组只写一个数字，即#ff0011可写为#f01
- 常见取值：#fff为白，#000为黑
浙公网安备 33010602011771号