CSS入门

CSS概念

：全称：Cascading Style Sheetscascading:叠层style：样式sheets：列表

**它是：**层叠样式表（CSS）是描述标记语言页面格式的标准（或语言），CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性 CSS文件通常通过HTML文件中的链接附加到HTML文件。

CSS作用：
1，结构与样式分离的方式，方便后期的维护和修改可以用多套样式，
2，使得网页有任意样式切换的效果
3，使得页面载入的更快，降低服务器的成本

样式分类：
1，外部样式

2，内部样式：

3，行内样式

CSS选择器：

1，概念：用来选择需要添加的样式标签或者位置。
2，常用的选择器有：变迁选择器。类选择器。其他选择器

1，使用内部样式完成背景设置：（background)

background 背景样式是复合属性，可以多个添加。

添加背景图片，background-position

CSS外部样式

<link rel="stylesheet" type="text/css" href="index.css"/>
1、link:用于定义文档与外部资源的关系
2、rel="stylesheet"：rel是relationship的英文缩写 -- 关系
3、type="text/css":定义css样式文件的类型
4、href="index.css"：引用具体的文件

CSS常用样式：
1，颜色设置 color：1单词。2 #16进制。 3 rgb（255，0，0）
2，文本样式 ：对齐方式、文本修饰、文本转换、文本缩进

direction：ltr

direction:ltr
text-align:justify
1、如果是字母和汉字的话，两者效果一样；
2、主要针对阿拉伯数字，两者不一样；
3、对于direction来说：对于数字改变书写顺序，对于小数点显示也不一样

文本修饰：

针对首行缩进：text-indent – em是字符单位，2em表示2个字符：比如：ff

字体类样式—font系列

列表样式

伪类样式

1、概念：通常情况下，超级链接上设置的样式，称之为伪类
2、作用：设置超级链接的四种状
3、小贴士：伪类是使用在超级链接上比较多，但是超级链接不是伪类伪类是选择器

伪类和伪元素的区别

<ul>
    <li>11111</li>
    <li>22222</li>
</ul> 

CSS
li:first-child {
    color: red;   
}
// 选择器不能直接选取第一个子元素
// 伪类弥补了选择器的不足

而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

<p>
    <span class="first-letter">H</span>ello, World
</p>


CSS
.first-letter {
  color: red;
}


其实上面的代码就是：
p::first-letter {
  color: red;
}