Day3

PS：此文章仅用于监督自己的学习，望大佬轻喷

---

一、css层叠样式：
用来美化网页，做到结构（html）和表现（css）分离
二、基本语法：
选择器 {
属性：属性值；
}
三、css的四种引用方式：
1、行间样式：直接在标签上书写样式

<div style="color:olive;width: 100px;border:1px solid blue;">行间样式测试1</div>

2、内部样式：在文件内部书写样式

<style>
        样式内容
</style>

    <style>
        p{
            background-color: #eeeeee;
            font-size: 18px;
            font-style: italic;
        }
    </style>

3、外部样式：(1)、先创建一个css文件；(2)、再用link标签引入这个文件
创建一个css文件：

span{
    font-size: 20px;
    color: aquamarine;
    display: block;
}

link引入：

<link rel="stylesheet" href="css/style.css">

4、导入外部样式：(1)、先创建一个css文件；(2)、再style标签中用import导入这个样式文件
创建和上面一样
然后import引入

<style>
    @import "css/test.css";
</style

注：用.box{文字内容}*数字加Tab可以快速写div标签，数字3就是3行div
四、以上四种css引用方式的区别：

行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个html文件引用（最多使用；结构分离）。
外部样式分为link引入和import引入两种方式

提示：

1、link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于css范畴，只能加载css。
2、link引用css时，在页面载入是同时加载；@import需要页面网页完全载入后加载。
3、link是xhtml标签，无兼容问题；@import是在css2.1提出，低版本的浏览器不支持。
4、link支持使用javascript控制DOM区改变样式；而@import不支持。

五、css选择器分类：
1）、*：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素）

*{
    color:blue;
}`

2）、标签选择器：用来匹配对应的标签

    span{
    display: block;
    margin-right: 20px;
    border: 1px solid red;
    font-style: oblique;
    color: red;
}

3）、类选择器：用来选择class命名的标签

  .wrapper{
    color: green;
    font-style: italic;
}

4）、ID选择器：用来选择id命名

    #content{
    color: hotpink;
    font-style: initial;
    font-size: 20px;
}

5）、派出选择器：根据上下文来确定选择的标签

.box1 li{
    color: khaki;
}
.box2 li{
    color: lightsalmon;
}

以上代码：



运行：

六、选择器分组：
让多个选择器（元素）具有相同的样式，一般用于设置公共样式

h1,.box,p{
    color: orange;
}

如下：

运行：

这里和h1和div都为橘黄色 ，而p标签进行覆盖后变为蓝色

七、选择器的继承： 子元素可以继承父元素的样式，反之不行

这里和c++的继承类似，具体等之后练习再深究

八、优先级：
内联样式>内部样式>外部样式
样式权重：！import（10000）>内联样式（1000）>ID选择器（100）>伪类选择器（10）>标签选择器（1）

加了！import之后权重最大，样式为红色：

样式权重可以用在选择器分组中，这里没太弄明白

九、CSS字体

1）、font-size：字号	
	font-size：设置文本大小
	属性值：1、{number+px}：固定尺寸像素
	             2、{number+%}：其百分比是基于父对象中字体的尺寸大小
2）、font-family：字体
	font-family：设置文本字体
	p{font-family：Courier，"Courier New",monswpace}（其中如果浏览器不支持第一种字体，则用后面两种，如果都不支持，则使用浏览器默认字体。其中有空格的化要用""括起来）
3）、font-style：样式
	font-style：设置文本字体样式
	p{font-style：normal；}（正常字体）
	p{font-style：italic；}（斜体）
	p{font-style：oblique；}（倾斜的字体）
4）、font-weight：加粗
	font-weight：设置文本的粗细
        示例：
	p{font-weight：normal；}（默认值，正常字体）
	p{font-weight：bold；}（粗体）
	p{font-weight：bolder}（比bold粗）
	p{font-weight：lighter；}（比normal细）
	{100-900} p{font-weight：600}：定义由粗到细的字符。400等同于normal，而700等同于bold
5）、line-height：行高
       示例：
	p{line-height：normal；}（默认值，正常字体）
	p{line-height：24px；}（指定行高为长度像素）
	p{line-height：1.5；}指定行高为字体大小的倍数
6）、color ：字体颜色
        示例：
	p{color：red；}（颜色名称指定）
	p{color：rgb（100，14，200）；}（指定颜色为RGB值）（r：0-255；g:0-255；b0-255/16进制（以#开头，后跟6位（#rrggbb）或3位（#rgb）16进制数））
	p{color：#345678；}（指定颜色为16进制）
7）、text-decoration：文字修饰
	text-decoration：设置文本字体的修饰
         示例：
	p{text-decoration：normal}（默认值，无修饰）
	p{text-decoration：underline；}（下划线）
	p{text-decoration：ling-through；}（贯穿线）
	p{text-decoration：overline；}（上划线）
8）、text-align：文本对齐方式
         示例：
	p{text-align：left}（左对齐）
	p{text-align：center；}（居中）
	p{text-align：right；}（右对齐）
9）、text-transform：字母大小写
         示例：
	p{text-transform：capitalize；}（将每个单词的第一个字母转换成大写）
	p{text-transform：uppercase；}（转换成大写）
	p{text-transform：lowercase；}（转换成小写）
10）、text-indent：文本缩进
         示例：
	p{text-indent：24px；}（首行缩进number像素）
	p{text-indent：2em；}（首行缩进number字符）
注：font复合属性：
	font：font-style font-variant font-weight font-size/；ine-height font-family；
	注意：1）属性值的位置顺序
	          2）除了font-size和font-family之外，其他任何一个属性值都可以省略
	          3）font-variant：normal/small-caps（让大写字母变得小一些）

一些常用的属性，先记下来。。。

今天到这了，公务员省考后天开始报名了（要考试的小伙伴不要忘了）；莫名紧张。

感觉css东西很多，现在框架有点乱，买了《css揭秘》，慢慢来吧