ul li前面的点怎么变大_CSS究竟是怎么工作的？

1、什么是CSS?

CSS (层叠样式表) 让你可以创建好看的网页，CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。CSS 可以用于给文档添加样式 —— 比如改变标题和链接的颜色及大小。它也可用于创建布局 —— 比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局。它甚至还可以用来做一些特效，比如动画。

2、CSS究竟是怎么工作的？

当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，但是下面的步骤基本都会出现：

1. 浏览器载入HTML文件（比如从网络上获取）。

2. 将HTML文件转化成一个DOM（Document Object Model），DOM是文件在计算机内存中的表现形式，下一节将更加详细的解释DOM。

3. 接着，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的**图片**、**视频**和**CSS样式**。

4. 浏览器拉取到CSS之后会进行解析，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。

5. 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。

6. 网页展示在屏幕上（这一步被称为着色）。

结合标题图示更形象。

3、CSS的基本语法是怎样的?

CSS是一门基于规则的语言 —— 你能定义用于你的网页中，特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”

h1{
  color: red;
  font-size: 5em;
}	

语法由一个 选择器(selector)[

Selector (CSS)​developer.mozilla.org

]起头。 它 选择(selects) 了我们将要用来添加样式的 HTML 元素。 在这个例子中我们为一级标题（主标题<h1>）添加样式。接着输入一对大括号{ }。 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(declarations)。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

4、CSS选择器是什么概念，简单选择器和属性选择器是什么?

选择器：用来指定网页上我们想要样式化的HTML元素。CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

p{
   color:blue;
}

简单选择器是在工作中，它们很有可能会是最常用到的。分为：

类型选择器：类型选择器有时也叫做“标签名选择器”或者是”元素选择器“，因为它在文档中选择了一个HTML标签/元素的缘故。

span{
    background-color: yellow;
}

全局选择器：全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。

*{
  margin: 0;
} /*我们已经用全局选择器，移去了所有元素上的外边距。这就是说，
和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是，
每个物件都紧紧地挨在一起，我们不能那么容易就看清楚不同的段。*/

这种行为有时能在“重置样式表”中看到，其中所有浏览器所做的样式化都会被忽略。这些一度很受欢迎，但是把所有的样式化忽略掉的话，通常就是指，你必须做把这些样式带回来的工作！因此我们应小心使用全局选择器，以处理诸如下面所述之类的很特殊的情况。

类选择器：类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。

highlight { background-color: yellow;}

ID选择器：ID选择器开头为#而非句点，不过基本上和类选择器是同种用法。在一篇文档中，一个ID只会用到一次。它能选中设定了id的元素，你能把ID放在类型选择器之前，只指向元素和ID都匹配的类。

#one { background-color: yellow;}
h1#heading {color: rebeccapurple;}

属性选择器：从HTML的学习中，元素可以带有属性，它提供了关于如何标记的更详细信息。CSS中，我们可以用属性选择器来选中带有特定属性的元素。这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

1、存否和值选择器

a [title]{  } /*这组选择器根据，一个元素上的某个标签的属性的存在以选择元素的不同方式*/
a[href="Example Domain"]{ } /*一个有特定值的标签属性是否存在来选择*/

选择器	示例	描述
[attr]	a[title]	匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value]	a[href="https://example.com"]	匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
[attr~=value]	p[class~="special"]	匹配带有一个名为attr的属性的元素 ，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。 注意，在一列中的好几个值，是用空格隔开的。
[attr|=value]	div[lang|="zh"]	匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。

• 使用li[class]，我们就能匹配任何有class属性的选择器。这匹配了除了第一项以外的所有项。
• li[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。
• li[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

<style>
li[class] {
    font-size: 200%;
}
li[class="a"] {
    background-color: yellow;
}
li[class~="a"] {
    color: red;
} 
</style>
<h1>Attribute presence and value selectors</h1>
<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>

2、子字符串匹配选择器

这些选择器让更高级的属性的值的子字符串的匹配变得可行。例如，如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。

选择器	示例	描述
[attr^=value]	li[class^="box-"]	匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value]	li[class$="-box"]	匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value]	li[class*="box"]	匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

如下示例展示了这些选择器的用法：

<style>
li[class*="a"]
/*匹配了任何值开头为a的属性，于是匹配了前两项。*/
li[class^="a"] {
    font-size: 200%;
}
/*匹配了任何值结尾为a的属性，于是匹配了第一和第三项。*/
li[class$="a"] {
    background-color: yellow;
}
/*匹配了任何值的字符串中出现了a的属性，于是匹配了所有项。*/
li[class*="a"] {
    color: red;
}
</style>
<h1>Attribute substring matching selectors</h1>
<ul>
    <li class="a">Item 1</li>
    <li class="ab">Item 2</li>
    <li class="bca">Item 3</li>
    <li class="bcabc">Item 4</li>
</ul>

文本样式都有哪些相关属性，对应哪些值？

元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者想强制地换行使用 <br> 元素。

用于样式文本的 CSS 属性通常可以分为两类：

字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。

文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

1.颜色`color: ;`其值英文颜色名、16进制、GRB颜色值都可以。

2.字体种类： `font-family: Arial;` 属性，浏览器指定一个字体 (或者一个字体的列表)，将字体应用到选中的元素上。浏览器只会把在，当前机器上可用的字体应用到，当前正在访问的网站上，如果字体不可用，就会用浏览器默认的字体代替。

3.字体大小

4.字体样式，字体粗细，文本转换和文本装饰

5.文本布局