概念：用来修饰网页样式的语法叫做层叠样式表
CSS基础语法
格式：选择器{属性1：值1；属性2：值2}
单位：px->像素、%百分比（相对于外容器）
基本样式：width、height、background-color
注释：/css注释内容/
css：用来修饰网页样式的语法叫做层叠样式表
css样式引入方式
行内（内联、行间）样式
在html标签上添加style属性实现的
<p style="text-align: center; background-color: aquamarine;">
文字水平居中
</p>
内部样式
在style标签内添加的样式
内联和内部样式的区别
内部样式可以复用代码，多个同标签可以引用，更能符合w3c的规范标准，让结构和样式分离。行内样式无法复用，一个style属性只能影响一个元素
外部样式
引入一个单独的css文件，name.css
引入方式
方式一.<link>标签 //当前页面与外部资源的引入入口
rel 属性 ：指定资源与页面的关系，常用stylesheet属性值（其它属性值入口），用于文档的外部样式表
href属性：资源的地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body>
<div >
哈哈
</div>
</body>
</html>
方式二.@import 这种方式问题比较多不建议使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
@import url("./index.css");
</style>
</head>
<body>
<div >
哈哈
</div>
</body>
</html>
link和@import区别:（区别是摘抄该作者的，更详细大家可以去该作者文章看看https://www.cnblogs.com/my–sunshine/p/6872224.html）
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别(该项有争议)
link引入的样式权重大于@import引入的样式。
span-div标签
div和span没有任何默认样式的，如果只是单纯的将这两个双标签放在html代码当中，那么他们在浏览器中是相当于没有的，也不会有占位效果，需要配合CSS使用才行
<span></span>标签：一个容器标签，不具备任何特殊功能，仅当容器使用，用于包裹一段文本。便于给文本增加样式（行内元素）
<p style="text-align: center; background-color: aquamarine;">
文字水平居中
</p>
<p style="text-align: center; background-color: aquamarine;">
<span style="background-color: bisque;">span容器</span>
</p>
div：div全程为division,'分割、分区’的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div> ,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。一个通用的容器标签，不具备任何特殊功能，仅当容器来使用，可以包裹任何内容，也可以容器直接互相包裹 ；特点：一个空div，默认宽度100%，高度为0
css常用属性
text-align:“center” :让容器内部元素水平居中
line-height:‘容器高度’
让文字垂直居中 ling-height==height
<div id="nav" style="height: 100px;background-color: aquamarine;line-height: 100px;">文字垂直居中</div>
background-color:pink ;背景颜色
text-decoration:none 文本修饰去掉a标签下划线
<a href="">a标签自带下划线</a>
<a href="" style="text-decoration: none;"> 去掉下划线</a>
border:边框样式 边框大小 边框颜色；边框样式分为solid实线，dashed：波浪线，dotted:…点
margin:auto 让容器本身水平居中
<div id="" style="width: 200px; background-color: gold">
<div id="" style="color: red; width: 100px; margin: 0 auto;background-color:pink;height:100px">
</div>
</div>
body默认样式
body标签默认情况：margin会有8px的空隙，一般会在开始就先将body的margin置为零
<body bgcolor="gold">
<div id="bannar">
<img width="100px" src="../img/可爱二.jpg" >
</div>
<div id="nav"></div>
<div id="footer"></div>
</body>
元素宽高的百分比是相对父元素而言的，若父元素高度为0，则子元素高度即使设置100%，大小也是0，html元素是相对于浏览器窗口而言的，默认情况下html高度为0，如果要是实现body沾满整个屏幕则需要同时设置html，body的高度为100%
<style type="text/css">
html,body{
margin: 0;/* 清除窗口滚动条 */
height: 100%; /* 占满整个屏幕*/
}
</style>
css选择器
id选择器 #name ：表示身份 ，在页面中元素的id不允许重复，因此id选择器只能选择单个元素
class选择器 .name ：类（别）选择器：选择拥有该类别的多个元素
标签选择器 div ：根据标签名称选择对应的所有标签
*通用选择器 ：针对页面上所有的标签都生效
组合选择器：.a,.b,.c 样式相同的组合
选择器优先级
行内样式>内部样式表
行内样式>id选择器>类选择器>标签选择器>通用选择器
css权重值
当样式发生冲突时，谁的权重值高，谁就生效（根据精确值，精确值越高，权重值越大，通用选择器选择的最多，然后class可以公用，id就是唯一标识，行内就是只在本元素生效）
通用选择器*：权重值0，
标签（元素）选择器div：权重值1
类选择器class：权重值10
id选择器：权重值100
行内样式：权重值1000
css文本属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.p1{color: red; /* 文本颜色*/}
.p2{font-family: "宋体"; /* 字体类型*/ }
.p3{font-size: 30px; /* 字体大小*/}
.p4{font-weight: bold; }/* 字体加粗 */
.p5{font-style: italic; }/* 文字斜体 */
.p6{text-align: center;}/* 文字居中 */
.p7{line-height: 20px;}/* 行高 */
.p8{height:50px ;line-height: 50px; background-color: bisque;}/* 垂直居中*/
.p9{text-decoration: underline;} /* 文本修饰 none没有下划线*/
.p10{text-indent: 20px;}/* 首行缩进 */
</style>
</head>
<body >
<div>
<ul id="news">
<li class="p1">p1 文本颜色</li>
<li class="p2">p2 字体类型</li>
<li class="p3">p3 字体大小</li>
<li class="p4">p4 字体加粗</li>
<li class="p5">p5 文字斜体k</li>
<li class="p6">p6 文字居中</li>
<li class="p7">p7 行高</li>
<li class="p8">p8 垂直居中</li>
<li class="p9">p9 文本修饰 none没有下划线</li>
<li class="p10">p10 首行缩进</li>
</ul>
</div>
</body>
</html>
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
