html & css学习第二周总结（上）

第二周在学习css各种选择器还有各种字体样式中度过，也涉及了一些框模型的知识。。然鹅弹幕说还没有步入门槛，emmmm...任重而道远哈～
同时补充了些html的标签，主要补充了两类，分别是文本标签和列表标签，比较简单，但是让我更加明白语意标签的含义了。在html中，基本上标签都是语意标签，正如上周总结的那样，html设置的是网页的骨架，这些标签的表现形式是什么不重要，重要的是它的含义，比如h1就是告诉浏览器这是一级标签，且搜索引擎检索完title后就会检索h1的内容；strong标签就是标记这是重要内容，虽然它们有个默认的样式（要做个基本的区分），如strong中的内容会被加粗显示，但是最后要呈现什么样式是由css设置的。
主要还是初步学习了css的一些知识，总结一哈子～

一.css编写位置

css全称是Cascading Style Sheets，即层叠样式表，网页可以看作是由一层层的叠加而成的，css就可以分别为网页的各个层次设置样式，编写位置有三种，以结构与表现的分离程度来分，以完全分离为佳。
(1）内联样式表：
内联样式最不建议使用，它是嵌入在每个标签中书写的，使用style属性，例：

我是内联样式

这个意思就是，使p标签中的内容颜色变为红色，字号大小变为20px.
(2）内部样式表：
为了使结构和标签进一步分离，可以将css样式编写在head中的style标签里，例：



在style标签中使用选择器+声明块的结构来书写指定标签的样式，如p{color:red;font-size:20px;}意思就是选中body中所有p元素，将其中的内容改成红色，字号变为20px。
（3）外部样式表
将css样式表编写到外部css文件中，然后通过link标签将外部文件引入到当前页面中，例：

link标签是自结束标签，固定属性rel=“stylesheet”和 type=“text/css” ，用href相对路径引入css样式文件。这种方式将css样式统一编写到外部样式表中，使结构和表现完全分离，可以使样式表在不同页面中使用，最大限度的使样式复用，并且可以利用浏览器缓存，提高打开速度，提升用户体验。

二.css基本语法

内联样式中样式已经写在标签里面了，但是另外两种位置无法确定要赋予的元素，因此基本结构首先要选择需要赋予的元素，使用选择器来进行选择，紧跟着声明块，表示对这个/这些元素赋予的样式，声明块由一组组名值对组成，由大括号{}扩起来，名值对间以分号；表示结束，即：
选择器{名值对1；名值对2；...;}

1.选择器

（1）元素选择器
直接输入需要选择的元素名，即可选中body中的所有该元素，例：
p{color:red;} 表示选中所有元素，并赋予红色

（2）id选择器
以#开始接着设置好的id值，即可选中特定id的元素，例：
假使有一个p元素，为这个p元素设置的id为p1,

，此时选中它可以用id选择器，即：#p1{color:red;}

（3）类选择器
同一页面中每个元素的id值不可重复，选择多个元素使就可以使用类选择器，以.开始后接着设置好的class值，即可选中拥有同一class值的元素。例：
假使有多个元素，通过赋予同一个class的值，

我是一个段落

我也是一个段落

我还是一个段落

我是一个div块元素

使用类选择器将它们都选中，即
.c1{color:red} 表示所有class值为c1的元素颜色变为红色

（4）子元素选择器、后代元素选择器和兄弟元素选择器
首先要明白元素间的“父子”关系（hhh）。html中有明确的层级关系：
1）父元素是指直接包含子元素的元素，父元素也是祖先元素；子元素：直接被父元素包含的元素；
2）祖先元素：直接或间接包含后代元素的元素；后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素；
3）兄弟元素：拥有相同父元素的叫做兄弟元素。
比如

这里span和p元素都是div的子元素，也是body的后代元素，反之div是span和p的父元素，body是祖先元素；子元素也可以叫做后代元素，父元素也可以叫做祖先元素；同一级的span和p互为对方的兄弟元素。
子元素选择器即是选择指定父元素的指定子元素：
父元素>子元素
即如果要选择上文中span元素，可以用子元素选择器，即：
div > span
后代元素选择器即是选择指定元素的指定后代元素：
祖先元素 子孙元素
中间用空格隔开，即如果要选择上文中p元素，可以用后代元素选择器，即：
body p
兄弟元素选择器

①选中一个元素后紧挨着的指定元素，如果不是紧挨的那就选不中：
前一个元素 + 后一个元素
如果要选中第一个p元素，即:
span+p{color:red;}
②选中一个元素后面的所有指定兄弟元素：
前一个元素 + 后一个元素
如果要选中所有p元素，即:
span～p{color:red;}

（5）伪类选择器
伪类表示一些特殊的状态，或者一些特殊的子元素，或者用伪元素表示一些特殊的位置，用冒号连接标签名（或选择器）和特殊状态/子元素/位置。
①表示特殊状态
比如网页的超链接有四种状态：
a:link{}设置未访问过的普通链接样式；
a:visited{}设置曾访问过的链接样式；
a:hover{}设置鼠标悬停在链接上样式；
a:active{}设置点击链接时的样式。
也可以设置其他标签的这四种状态样式

:focus表示获取焦点的状态，例：input:focus ,表示在创建文本输入框，鼠标点击框内即获取焦点时的状态样式设置

②表示一些特殊的子元素

-选择指定元素，且它在所有子元素中属于第一个/最后一个/第n个/奇数行/偶数行 的子标签（只要是子标签即可，无论父标签是什么）：
标签名:first-child{}
标签名:last-child{}
标签名:nth-child(number){}
标签名:nth-child(odd){}
标签名:nth-child(even){}
例如，
选div中第一个p元素： p:first-child，此时第一个p元素不会被选中，因为他不是在div中的第一个子元素
选div中最后个p元素： p:lastt-child
选div中第二个p元素： p:nth-child(2)

-选择指定元素，且它在所有子元素的指定元素中属于第一个/最后一个/第n个/第an+b个：
标签名:first-of-type{}
标签名:last-of-type{}
标签名:nth-of-type(number){}
标签名:nth-of-type(an+b){} a表示周期，n表示计数器（从0开始），b表示从滴b个开始选
此时输入p:first-of-type可以选中第一个p元素

③表示一些特殊位置（伪元素）
-::first-letter 表示选择首字母
-::first-line 表示选择首行
-::selection 表示为在页面内选中的文本设置样式，例：p::selection{background-color:red;} 表示当在页面框选p元素中的文字内容时，其文字背景颜色会变成红色。
-::before 表示在标签内容前，一般结合content属性，即::before{content:"xxx";}，在页面中无法被选中
-::after 表示在标签内容后，一般结合content属性，即::after{content:"xxx";}，在页面中无法被选中

（6）属性选择器
用属性选择器来选择指定元素中有特定属性或属性值的元素：
标签名[属性名] 选取含有该属性的元素
标签名[属性名=“属性值”] 选取含有该属性且有指定属性值的元素
标签名[属性名^=“属性值”] 选取含有该属性，且属性值以指定内容开头的元素
标签名[属性名$=“属性值”] 选取含有该属性，且属性值以指定内容结尾的元素
标签名[属性名=“属性值”]* 选取含有该属性，且属性值包含指定内容的元素

（7）选择器分组
通过选择器分组可以选中多个选择器对应的元素，
-语法：
选择器1，选择器2，选择器N{}
-例子：#p1,.p2,h1{background-color:yellow;}

（8）复合选择器（交集选择器）
可以选中满足多个选择器的元素，但对id选择器来说不建议使用复合选择器
-语法：
选择器1选择器2选择器3 （之间无空格）
-例子：span.c1{} 表示选择class值为c1的span元素

（9）通配选择器
-选择页面中所有的元素
-语法：*{}

终于整理完选择器的内容了。。好多==，初学记忆可以用cssdinner来练习选择器的内容，搞清楚这各式各样的选择器～，网址如下：https://flukeout.github.io/
练完一次赶脚还不太够，没事的时候玩玩巩固下挺好的～

cssdinner.png