淦啊！哪儿有第二天隔那么久的啊喂！
当然因为工作原因，自己也不可能天天都有时间写学习日志啦...
不过更大的原因还是在于自己当初真的动摇了吧，不知道是不是该继续学下去，突然想到这才第二天啊，什么都做不出来就要放弃了，感觉也怪丢人的2333
于是自己还是厚着脸皮继续学下去了，只要也得吧JavaScript那一部分看完吧...
真希望自己能坚持得久一点啊...
这一部分是关于CSS的一些基本的使用方法，因为综合的量很多，所以暂时想分为两部分来写，毕竟按照课程安排，这也是两天的内容
然后那份二次元简历写得也差不多了，就最终效果来说自己感觉还是比较满意，当然途中发现的问题也很多，毛病其实也不少，关于其总结与心得，干脆就留到下一次来讲好了
这次还是解决课程中的验证问题吧
1.什么是CSS，CSS是如何工作的？
CSS（层叠样式表），是用来指定文档如何展示给用户的一门语言（并非程序语言）
CSS可以给文档添加样式——比如改变标题、正文和链接的颜色、大小以及字体，其也可以用来创建网页布局，甚至还可以用来做动画特效
CSS的工作可以大体分为以下几个步骤：
1.浏览器载入HTML文件（比如从网络上获取）。
2.将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算
机内存中的表现形式，下一节将更加详细的解释DOM。
3.接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视
频和CSS样式。JavaScript则会稍后进行处理，简单起见，同时此节主讲CSS，
所以这里对如何加载JavaScript不会展开叙述。
4.浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、
class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，
将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应
用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染
树）。
5.上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
6.网页展示在屏幕上（这一步被称为着色）
image.png
需要注意的是DOM的树形结构，通过html生成DOM文件，能使得CSS列表中的规则快速运用到DOM树形结构的每一个相应的节点上
此外，当浏览器遇到无法解析的CSS代码时，将会自行跳过，并执行下一条CSS规则，以此类推
关于更多DOM树形结构的内容：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_works
2.CSS的基本语法是怎样的？
CSS是一门基于规则的语言，通过以下例子可以观察其基本的语法结构：
h1{
color: red;
font-size: 5em;
}
其中以h1的选择器起头，它选择了我们需要用来添加样式的html元素
接着是一对大括号，在括号内定义一条或多条用来改变html元素的规则，每条规则之间必须用' ; '隔开
每一条具体的规则都可以分为两个部分，即属性和值，其中属性在前，赋值在后，并且用' : '隔开，例子中的color和font-size就表示属性，red和5em即为其对应的值
一个CSS样式表可以包含多个规则集，比如：
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}
3.CSS选择器是什么概念，简单选择器和属性选择器是什么
正如上面例子中所看到的，选择器是CSS规则的第一部分，它是元素和其他部分组合起来告诉浏览器哪个html元素应当是被选为应用此CSS规则的方式；选择器所选择的元素被称为“选择器的对象”
类型选择器：
也被称为“标签名选择器”和“元素选择器”，因为它在文档中选择了一个html元素，例如：
h1 {
background-color: yellow;
}
p{
color: rebeccapurple;
}
span{
color: rebeccapurple;
}
在此例中，文档中所有的<h1>、<p>和<span>元素都被相应规则样式化
全局选择器：
是由一个星号（*）代指的，其可以选中文档中的所有内容（或是父元素中的所有内容），比如：
* {
margin: 0;
}
此行为常用于重置样式表
类选择器：
以一个句点（.）开头，会选择文档中应用了这个类的所有物件，比如：
.highlight {
background-color: yellow;
}
在此例中，文档中所有包含此类元素的背景色都被标记为黄色
重温一下html中关于类的定义：
<p class="highlight">This is a paragraph.</p>
ID选择器：
开头为#而非句点，不过基本上和类选择器是同种用法，区别在于，在一篇文档中，一个ID只会用到一次且唯一存在，并且因为指定元素更为具体，其优先级要高于类选择器，比如：
#one {
background-color: yellow;
}
h1#heading {
color: rebeccapurple;
}
需要注意的是ID选择器亦可以和类选择器搭配使用，即便大多数情况下都没有那个必要...
属性选择器：
用属性选择器来选中带有特定属性的元素
1.存否和值选择器
[attr] 例1：a[title]
匹配带有一个名为attr的属性的元素——方括号里的值
[attr=value] 例2：a[href="https://example.com"]
匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串
[attr~=value] 例3：p[class~="special"]
匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配
注意，在一列中的好几个值，是用空格隔开的
[attr|=value] 例4：div[lang|="zh"]
匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符
2.子字符串匹配选择器
[attr^=value] 例1：li[class^="box-"]
匹配带有一个名为attr的属性的元素，其值开头为value子字符串
[attr$=value] 例2：li[class$="-box"]
匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value] 例3：li[class*="box"]
匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。
3.大小写敏感
如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配ASCII字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式，进行匹配——HTML中是大小写敏感的，例如：
li[class^="a" i] {
color: red;
}
此时浏览器对大小写敏感
一般很少用...
4.文本样式都有哪些相关属性，对应哪些值？
用于样式文本的 CSS 属性通常可以分为两类
字体样式：
作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体等等。
color
text-decoration
设置文字装饰，经常用来取消链接的下划线，常用取值为：none、underline、overline、line-through，其实就英文字面意思就可以看出具体作用是什么...
font-family
设置字体，自己常用的是从Google font上引用来的字体，在作业当中也有体现，具体用法就不说了
font-size
字体大小，需要注意的是rem和em这两种单位的区别
font-style
取值有norma（正常）、italic（斜体）、oblique（斜体）
如果要用斜体最好还是用oblique吧
font-weight
字体粗细，一般会用bold（加粗）
lighter（相比父元素更细），bolder（相比父元素更粗）
100-900设置值，这个就不说了
font-transform
字体转换，常用的有：
uppercase（转大写）
lowercase（转小写）
capitalize（首字大写）
none（防止转型）
此外还有什么半角转圆角，这个也不说了，感觉用的很少
text-shadow
设置文字阴影
eg：text-shadow : 4px 4px 5px red ;
四个属性值分别如下：
1.阴影与原始文本的水平位置偏移
2.阴影与原始文本的垂直位置偏移
3.阴影的模糊半径
4.阴影的基础颜色
这四个值都很重要，一定要设置！
文本布局风格：
作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
text-align
文本对齐，常用值为：left（左对齐）、right（右对齐）、center（居中）、justify（文本展开）
line-height
行高，可以设置无单位值作为乘数，一般推荐1.5—2（倍行高）
letter-spacing 以及 word-spacing
设置字母与单词间距，用得比较少，需要的时候再查吧...
似乎对中文没用...
white-space
常用值pre，保留文本空白，作业中为了给诗词排版也有使用
image.png
作业效果大概就是这样啦，做着做着就上头了，用了很多看起来很酷炫的东西（大概）
总结和源代码之后会贴上来~
网友评论