Web应用开发技术-CSS
HTML元素属性分类：
-
特有属性
-
全局属性(所有HTML都可以使用的属性，如id等)
-
事件属性
CSS
Cascading Style Sheet，层叠样式表，一种样式表语言，其作用是控制页面内容的显示外观效果
CSS样式设置：
1.浏览器默认样式
2.外部样式表(在文档头通过link元素链接CSS文件)
3.内部样式表(直接在文档头通过style元素指定)
4.内联样式(直接在某个元素的style属性中指定)
样式设置的优先级从上往下依次递增，即内联样式的优先级最高，对于重复设置的某个样式规则，优先级高的将会覆盖优先级低的
除了内联样式，样式表是由若干个CSS规则集构成，每个规则集由选择器(Selector，选择要设置样式的元素)和一对花括号构成，花括号中包含若干条声明(Declaration即若干条具体样式规则)，每个声明都要以分号结尾，一个声明内部是由属性名和属性值构成，它们以冒号分隔，如果属性值含有空格，还需要用引号括起来
CSS中使用/* */括起来的为注释内容
盒子模型(Box Model)
在CSS眼中，一个占据页面空间的HTML元素就是一个盒子，每个盒子都具有外边距(Margin)，边框(border)，内边距(Padding)，内容(Content)这些属性
CSS学习方法：熟练掌握常用样式规则的意义和写法
文本相关样式
color：设置文本颜色
font-size：字号，常用单位有px，em，rem
font-family：字体设置，通常使用字体列表，浏览器会从左向右一次匹配，直到找到系统中可用的字体，如果没有找到就使用浏览器默认字体
font-size：字体样式，常用就是italic，即斜体
font-weight：字体粗细，常用就是bold，即粗体
text-decoration：文本装饰，常用就是underline，overline，line-through
text-align：文本排列方式，常用就是left，center，right
letter-spacing：字符间距
line-height：行高
text-indent：文本缩进
index 索引之页， apache，nginx如果不指定访问的网页，默认情况下会访问index，所以才会把主页命名为index
margin的使用：
margin-top: -20px;
margin-left: 200px;
/*margin: 50px 上下左右都为50*/
/*margin: 50px -100px 上下为50 左右为100*/
/*margin: 50px 100px 200px 上为50 左右为100 下为200px */
/*margin: 50px 100px -500px 100px 上为50 右为100 下为500px 左为100px*/
绝对单位：
px：像素，是多少像素就是多少像素
相对单位：
em：倍数，这个倍数是相对于父元素来计算的，其父元素是20px，那么它就是40px
rem：相对根元素(即html元素)来参考，不论其父元素的大小怎么变都不会变
font-*
font-size：设置字体大小，也可理解为字体的高度
font-family 设置字体，后面可以直接跟楷体，黑体等字样，当然需要浏览器安装这种字样。一般建议使用所有浏览器都安装过的字体，因为就算你的浏览器装过这种字体，别人的浏览器没装过，就会显示默认字体，达不到你的预期期望。font-family后面可以跟多种字体，你可以把你最期望的字体写在最前面，其次期望的写在后面，别人的浏览器就会一次判断有无此字体，如果有就用，都没有就使用默认字体
font-style：italic： 斜体
font-weight：字体的重量，例如后面跟bold即为加粗
text-*
text-decoration：underline 下划线 (但一般前端工程师不会这样做，因为一些字母如 g等会穿过下划线，看起来不美观)
text-decoration：line-through 删除线
text-align：设置文本的排列方式，后面可跟center(居中)，right(右对齐)等
letter-spacing： 设置字符间距 如 3rem 等
line-height：行高
text-indent：首行缩进
设置背景
background
background: url("图片路径"); 设置背景图片
后面可以跟no-repeat top 表示只要一张图并且居中
link
用来连接外部CSS样式表文件
<link rel="stylesheet" href="样式文件(以.css结尾)" type="text/css"
CSS当前最新版本为3.0，注意CSS3新增的特性并不是所有浏览器都支持的
选择器(Selector)
-
元素选择器：选择指定的元素
-
ID选择器：选择指定ID属性的元素
-
类(Class)选择器：选择指定class属性的元素
-
伪类(Pseudo-class)选择器：选择特定状态下的特定元素
-
伪元素选择器(Pseudo-element)选择器：选择某个元素内部的特定内容
-
属性选择器：选择含有特定属性的元素，使用中括号将属性名括起来
-
分组选择器：同时对多个元素设置相同的样式，用逗号分隔
-
后代选择器：选择某个元素的后代元素
-
子元素选择器：选择某个元素的直接子元素，使用大于号(>)分隔
-
相邻兄弟选择器：选择紧邻某个元素的下一个元素，并且它们具有相同父元素，使用加好(+)分隔
-
普通兄弟选择器：选择某个元素的所有兄弟元素，使用波浪线(~)分隔
拥有相同父元素的元素之间互称兄弟
优先级：ID选择器 > 类选择器 > 元素选择器
显示样式(display Style)
通过display样式可以控制元素的显示方式
display：block 称为块级元素
display：inline 在一行显示
display：none 隐藏，元素所占的空间也不存在
visibility：hidden 隐藏，但元素所占的空间依旧存在
display：inline-block
定位(Position)
-
static：固定定位，静态定位
-
fixed：基于浏览器窗口定位，不论浏览器怎么划，它始终在那个位置
-
relative：相对定位，基于元素的正常位置定位
-
absolute：绝对定位，基于父元素定位
z-index：设置z轴的顺序
当两个元素显示位置存在交叉时，可以通过设置z顺序(z-index)控制他们的呈现方式
浮动(Float)
使用float属性，常用属性值为left和right
float：right 飘到最右边
clear：both 清楚浮动
飘起来后块级元素会压缩，会呈现在一行
扩展
-
style属性 全局属性，针对body里的内容
在发生重复时，body里的style的优先级更高
在head中设置的style 会对body里指定的内容都生效
-
一般浏览器的默认字号为16px
-
通常情况下子元素会继承父元素的大多数样式，若font-size等
-
5.假如有多个相同元素需要设置不同的CSS样式，那么就可以用class，示例如下：
<p id="tip">azhe</p><p class="text">nihao!</p><p class="text">中国</p>6.在CSS样式中id的CSS名称用#加上id，即#tip，class的CSS名称为 .text
7.http默认端口是80，https默认端口号是443
8.样式资源网weui框架网， bootstrap
9.一般CSS样式中带有 - 横杆的都是为了一些浏览器专门准备的
10.min-width：50px 最小的宽度
11.CSS样式 *[id] 表示只要有id就执行以下属性
*[id*=stu]表示只要id属性中含有stu就执行其下面的属性12.列表样式
list-style-type：默认为圆形 可以跟none让前面没有形状
表格
border-collapse：collapse; 合并边框
13.对内联元素来说上下内外边距高度宽度都无效，对块级元素都是有效的
14.hover选择鼠标指针浮动在其上的元素，并设置其样式
15.selected 使被选中的文本成为固定的颜色
