CSS入门

CSS入门

一、概述

CSS是一门指定文档还如何呈现给用户的语言
使用CSS来指定HTML内容的样式
CSS展现文档的细节即为样式
将样式从它的内容分离出来，以便能够：

• 避免重复
• 更容易维护
• 为不同的目的，使用不同的样式而内容相同

二、CSS基本使用

1.内联样式

内联CSS也称为行内CSS，它直接在标签内部引入，优点是便捷、高效；但同时也造成了不能够复用样式的缺点

<p style="color: red;">这是我学习CSS的第一天</p>

2.选择器

CSS规则有两个主要的部分构成：选择器，以及一条或多条声明构成。同一个声明中的属性和值组成一个名值对，名值对用分号分隔

selector {
      property: value;
      property: value;
      ....
}

• 标签选择器：可以将标签名作为选择器，为所有该标签表示的元素添加样式，示例如下：

<style>
    p {
        color:red;
    }
</style>

<p>这是我学CSS的第一天</p>
<p>这是我学CSS的第二天</p>

• 类选择器：通过设置元素的class，可以为元素指定类名，示例如下：

<style>
     color-red; {
           color: red;
     }
     color-blue {
     color: bule;
     }
</style>

<p class="color-red">这是我学CSS的第一天</p>
<ul>
    <li class="color-red">苹果</li>
    <li class="color-red">香蕉</li>
    <li class="color-blue">橙子</li>
    <li class="color-blue">菠萝</li>
</ul>

• ID选择器：通过设置元素的id属性为该元素指定ID，示例如下：

<style>
     #hello {
           color: green;
     }
</style>

<p id="hello">这是我学CSS的第一天</p>
<p>这是我学CSS的第二天</p>

3.层叠与继承

浏览器对HTML定义的默认样式
开发者定义的样式，可以有三种形式：

• 定义在外部文件（外链样式）：在实际开发中主要是通过这种形式定义样式
• 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效
• 定义在特定的元素身上（行内样式）：这种形式多用于测试，课维护性较差
  嵌套的标签构建了网页元素的层级关系，此时父级元素的样式也会被子类元素继承，如下：

<style>
    p {
       color: red;
       text-decoration: underline;
    }
</style>
<p>这是我学<strong>CSS</strong>的第一天</p>

三、CSS常用样式

1.文本样式

• color 颜色

---

• font-size 文字大小
• font-weight 文字粗心
• font 字体集
• font-variant 字体变体
• font-style 字体样式

---

• text-alian 文字对齐
• text-decoration 文字装饰
• text-indent 文字缩进
• text-shadow 文字阴影

---

• line-height 行高
• word-spacing 单词间距
• letter-spacing 字母间距

2.颜色

• 关键字：red、blue、black等
• rgb坐标值：rgb(255,0,0)、rgb(0,0,255)、rgb(0,0,0)等
• 十六进制值：#ff0000、#0000ff、#000000等

3.列表

• list-style-type 列表样式类型
• list-style-image 列表样式图片

4.内容

• 内容文字：CSS可以在元素的前后插入文本：在选择器的后面加上 ::before 或者 ::after。在声明中，指定 content 属性，并设置文本内容
• 内容图片：可以通过将 content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面
• 背景图片：将 backgroung 的值设为图片的URL可以将图片设置成元素的背景图

四、伪类

CSS伪类是加在选择器后面的用来指定元素状态的关键字

selector:pseudo-class {
      property: value;
}

• :link 是用来选中元素当中的链接
• :visited 表示用户已访问过的链接
• :hover 适用于用户使用指示设备虚指一个元素的情况
• :active 匹配被用户激活的元素
• :focus 表示获得焦点的元素
• :checked 表示任何处于选中状态的元素