前端三件套（2）-CSS

1.网页与CSS

网页（HTML+CSS+Javascript）
HTML-结构-HTML是网页内容的载体（内容就是程序员放在页面上想让用户去浏览的信息，如文字，图片，视频等）

> CSS-表现-用来改变内容的外观，就像网页的外衣，内容还是那个内容，但是外观有变化，比如说字体，颜色变化，背景图片，边框设置等

Javascript-行为-Javascript用来实现网页上的行动的效果，一般的交互行为，动画效果由JavaScript来实现（后续准备学习JQuery，见专题：从Javascript到JQuery）

2.CSS基本介绍

2.1 CSS 指的是层叠样式表 (Cascading Style Sheets)
2.2 CSS用来修改html元素的样式（外观），将 HTML 页面的内容与样式分离提高 web 开发（前端）的工作效率

3.CSS基本使用

在 head 标签内，出现了 <style type="text/css">xxxx</style>
表示要写CSS内容，中间的xxxx可以填写你要修改哪一个html元素的那些样式（外观）
eg：
div{}表示css修饰的是html的div元素（div标签+内容）
具体内容说明:

1. font-size: 指定大小，可以按照像素大小
2. font-weight : 指定是否是粗体
3. font-family : 指定字体类型
4. margin-left margin-right 如果设置为auto, 表示左右居中
5. text-align: center 表示文本居中

4.CSS语法

由基本使用可以总结出：CSS语法包括两部分：
1.选择器----例如div{}，进行选择css修饰的是html的那个元素
2.声明----例如上面的具体内容{属性：值；}

5.常用样式

5.1 字体颜色

颜色可以写英文颜名，或者rgb值，或者十六进制表示值
eg：

5.2 边框 borde

div {
width: 300px;
height: 100px;
border: 1px dashed blue;
}

5.3 宽度 width/高度 heigh

div {
width: 200px;
height: 100px;
}

5.4 背景颜色

div{
background-color: #ff7d44;
}

5.5 字体样式

div {
border: 1px solid black;
width: 300px;
font-size: 40px; /* 指定字体大小 /
font-weight: bold; / 指定是否为粗体 /
font-family: 华文新魏; / 指定字体类型 */
}

5.6 DIV居中

5.7 文本居中

div {
border: 1px solid black;
width: 300px;
font-size: 40px;
font-weight: bold;
font-family: 华文新魏;
margin-left: auto;
margin-right: auto;/* margin指定auto表示div居中 /
text-align: center;/ 指定文本居中*/
}

5.8 超链接去下划线

a {
text-decoration: none;
}

5.9 表格细线

5.10 列表去修饰

ul {
/*list-style:none 表示去掉默认的修饰*/
list-style: none;
}

6.CSS使用方式

6.1在标签的 style属性上设置CSS样式（不好管理）
6.2在 head 标签中，使用style标签来定义需要的CSS样式（统一书写，较为方便管理）（和html在一起，同一页面内复用代码维护不方便）
6.3 把 CSS 样式写成单独的 CSS 文件，再通过link标签引入，分为如下两步：
（1.）写一个css文件，内部写上选择器与声明
（2.）在html文件中通过在head里使用link标签引入<link rel="stylesheet" href="test.css"/>

7.CSS选择器

1.css元素选择器：CSS 元素/标签选择器通常是某个 HTML元素
2.id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
eg:html中<h1 id="css1">id选择器的使用</h1>
对应css中#css1{color ：red；}
3.class类选择器：以通过 class 属性选择去使用这个样式
eg：:html中<h1 class="css1">类选择器的使用</h1>
<h1 class="css1">类选择器的使用与id的区别可以重复</h1>
对应css中.css1{color ：red；}
4.组合选择器
eg：table，tr，td{属性：值}
5.优先级：行内样式 > ID 选择器 > class 选择器 > 元素选择器