CSS 层叠样式表 (cascading style sheets)
1 如何在网页中引入css代码
1）行内式 2）内嵌式 3）外链式 link 4）导入式 @import url("css/base.css");
加载优先级:就近原则 行内式>内嵌式>外链式>导入式 推荐外链式，内容与表现分离
2 选择器
标签选择器 标签名{} 一般对一类标签设置样式
id选择器 #id值{} 使用较少，通常用于独一无二的元素
类选择器 .class值{} 使用最多
选择器 通配符选择器 *{} 优先级低
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
<!--通配符选择器 先进行统一配置，但它优先级低，会被后面单独的配置覆盖-->
*{
background-color: hotpink;
}
<!--标签选择器-->
p{
background-color: coral;
}
<!--id选择器-->
#ol1{
color: red;
}
<!--class类选择器-->
.ul1{
background-color: green;
}
.box1{
width: 40px;
height: 40px;
background-color: blueviolet;
}
.box2{
width: 50px;
height: 50px;
background-color: aqua;
}
</style>
</head>
<body>
<p>第一自然段</p>
<ol id="ol1">
<li>第一名</li>
<li>第二名</li>
</ol>
<ul class="ul1">
<li>上海</li>
<li>北京</li>
</ul>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
并集选择器(群组选择器)、 交集选择器、 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
<!--后代选择器 div的后代中class为p5的 注意：点号前有空格-->
div p{
background-color: coral;
}
<!--并集选择器 注意：各选择器用逗号隔开，选择器可以是id和class名称或标签-->
.ht,.para{
background-color: green;
}
<!--交集选择器 既是p又是class为para 注意：点号前没有空格-->
p.para{
color: red;
}
</style>
</head>
<body>
<h1 class="ht">我是一级标题</h1>
<p class="para">我是第一段</p>
<p>我是第二段</p>
<p class="para">我是第三段</p>
<p>我是第四段</p>
<div>
<p class="p5">我是第五段</p>
<p>我是第六段</p>
</div>
</body>
</html>
子代选择器：父选择器>子选择器{} 选择器之间用>连接 eg:ul>li{}
毗邻选择器 选择器之间用 + 紧跟着h3标题的标签 eg:h3+p{}
兄弟选择器 选择器之间用~ eg:h3~p{}
-----------------------------------------------------------------------------------------------------------
样式设置
设置文字样式 clolor:red;
关于文字颜色设置方式（3种）：1)颜色单词 2）rgb(0~255,0~255,0~255) 3)十六进制 eg: #ff0000
文字对齐 text-align left/center/right 该属性对div p li等块级元素有效
文本缩进 text-indent:2em; 不要用绝对的eg:32px; em为当前像素font-size的 n em 倍, em 相对单位 1em默认是16px
文本修饰 text-decoration underline 下划线 overline 上划线 line-through中划线 none没有(默认值) 设置文本的装饰效果，主要用来删除链接的下划线
字体相关
font-size:20px; 设置字号
font-weight:normal 或 bold; 设置文字粗细 normal 400 bold 700
font-style:italic; 斜体 设置字体样式 normal 正常 italic斜体
font-family:宋体，”Microsoft YaHei“； 设置字体，若字体名中有空格，则要用引号引起来
line-height:20px; 一行字的高度，实际为下一行的基线到上一行基线的高度，基线位置由字体确定 ；一般对于一行文本垂直居中可让height line-height的值相等
font字体简写 字号和字体同时有才可简写
font:italic 400 20px/20px ”宋体“； 斜体，正常粗细，字号，行高 宋体
列表 无序列表 有序列表
无序列表-列表项标记用特殊图形（如小黑点、小方框等）
有序列表-列表项的标记用数字或字母
不同的列表项标记： 属性 list-style-type 属性值:none去掉标记 circle square uper-roman 大写罗马字母 lower-alpha小写英文字母
图像列表项标记 list-style-image:url(‘xxx.gif‘); 会有浏览器兼容性问题
表格 border属性 1px solid black; 1px黑实线
border-collapse:collapse; 折叠边框，表格的边框是否被折叠成一个单一的边框或隔开
注意： 如果没有指定 !DOCTYPE border-collapse 属性在 IE8 及更早 IE 版本中是不起作用的
绝大多数标签都可以看成一个盒子 有宽高或可放内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 20px; /*内容的宽*/
height: 20px; /*内容的高*/
background-color: aqua;
padding: 10px; /*内边距 内容到边框的距离*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>