css书写位置、选择器、字体、外观属性、标签的显示模式(display)
内部样式表
将
css
<head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head>
行内式（内联样式）
通过style属性设置
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表（外链式）
样式放在一个或多个以
.CSS为扩展名的外部样式表文件中通过link标签将外部样式表文件链接到HTML文档中
link属性
href
定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type
定义所链接文档的类型，在这里需要指定为“
text/css”，表示链接的外部文件为CSS样式表。
rel
定义当前文档与被链接文档之间的关系，在这里需要指定为
stylesheet表示被链接的文档是一个样式表文件。
<head> <link href="CSS文件的路径" rel="stylesheet" type="text/css"/> </head>
选择器
多类名选择器
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关
各个类名中间用空格隔开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .red { color: red; } .font20 { font-size: 20px; color: blue; } </style> </head> <body> <div class="font20 red">多类名</div> </body> </html>
ID选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #last { color: pink; } </style> </head> <body> <div id="last" class="red">id选择器</div> </body> </html>
通配符选择器
能匹配页面中所有的标签 - 一般不使用
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
后代选择器
把外层标签写在前面，内层标签写在后面，中间用空格分隔
所有的后代都会出现css效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div p { /*div下的所有p 都变为粉色*/ color: pink; } .jianlin p { /*中间用空格隔开*/ color: purple; } </style> </head> <body> <div> <p>王思聪</p> </div> <div> <p>王思聪</p> </div> <div class="jianlin"> <p>王思聪</p> </div> </body> </html>
子代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father > li > a { color: red; } </style> </head> <body> <ul class="father"> <li> <a href="#">123</a> <ul> <li> <a href="#">abc</a> </li> </ul> </li> </ul> </body> </html>
交集选择器
交集选择器由两个选择器构成
其中第一个为标签选择器，第二个为class选择器 / id选择器
两个选择器之间不能有空格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.red { /*交集选择器 既是 div 又 叫 red 满足条件 用的较少 特殊情况使用 了解 */ color: red; } </style> </head> <body> <div class="red">交集选择器</div> <p class="red">交集选择器</p> </body> </html>
并集选择器
各个选择器通过逗号连接而成的
包括标签选择器、class类选择器id选择器等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*1. 需求 吧 div p span 改为红色*/ div, p, span { /*并集选择器 用逗号隔开 , 代表 和 集体声明 适合于相同样式 */ color: red; } </style> </head> <body> <div>并集选择器</div> <div>并集选择器</div> <p>并集选择器</p> <p>并集选择器</p> <span>并集选择器</span> <span>并集选择器</span> <h1>并集选择器</h1> <a href="#">并集选择器</a> </body> </html>
链接伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a:link { /* 未访问过的连接状态*/ color: #3c3c3c; font-size: 25px; text-decoration: none; /*取消下划线*/ font-weight: 700; } a:visited { /*这个链接我们已经点过的样子 已访问过链接*/ color: orange; } a:hover { /*鼠标经过连接时候的样子*/ color: #f10215; } a:active { /*鼠标按下时候的样子*/ color: green; } </style> </head> <body> <a href="http://www.asdf12312312312312.com">秒杀</a> </body> </html>
开发中常用方式
a {
color: #333;
text-decoration: none;
font-size: 25px;
font-weight: 700;
}
a:hover { /*鼠标经过*/
color: #f10215;
}
字体
字体相关样式
font-style 字体风格
比如：斜体、倾斜或正常字体
font-weight 字体粗细
font-size 字号大小
font-family 字体
常用的字体有宋体、微软雅黑、黑体等
如果设置多个字体，则从第一个字体开始查找，知道找到系统中存在的字体，则直接显示该字体
font:综合设置字体样式
选择器
{font: font-style font-weight font-size/line-height font-family;}font-size 和 font-family 必须保留
外观属性
color 文本颜色
三种取值方式
预定义的取值
如red，green，blue等十六进制
如#FF0000，#FF6600，#29D794等RGB代码
rgb(255,0,0) 或 rgb(100%,0%,0%)
line-height 行间距
行与行之间的距离，即字符的垂直距离
属性单位有三种
px、em、%
text-align 水平对齐方式
是将盒子中的内容水平对其，而不是将盒子水平对齐
属性
left左对齐
right右对齐
center居中对齐
text-indent:首行缩进
首行缩进
1em为一个汉字的宽度
text-decoration 文本的装饰
属性
none默认，定义标准的文本
underline文本下划线
overline文本上划线
line-through文本删除线(穿过文本)
标签的显示模式(display)
块级元素(block)
每个块元素通常都会独自占据一整行或多整行
可以设置宽度、高度、对齐等属性
常见块元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等其中
<div>标签是最典型的块元素
行内元素(inline)
和相邻行内元素在一行上
高、宽无效
但水平方向的padding和margin可以设置，垂直方向的无效
行内元素只能容纳文本或则其他行内元素（a 特殊）
常见行内元素
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。
行内块元素（inline-block）
和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。 默认宽度就是它本身内容的宽度。 高度，行高、外边距以及内边距都可以控制。
