Css的基本使用

最新推荐文章于 2024-09-30 16:11:57 发布

yangfeipancc

最新推荐文章于 2024-09-30 16:11:57 发布

阅读量981

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/yangfeipancc/article/details/142212820

版权

概述

CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如，调整内容的字体，颜色，大小等样式，设置边框的样式，调整模块的间距等。

所谓层叠 : 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中，可以在页面头元素中，也可以在另一个CSS文件中，规定的方式会有次序的差别（讲解引入时说明）。

所谓样式：是指丰富的样式外观。拿边框距离来说，允许任何设置边框，允许设置边框与框内元素的距离，允许设置边框与边框的距离等等。

发展史

- CSS1：1994 年，Hkon Wium Lie 最初提出了 CSS 的想法，联合当时正在设计 Argo 的浏览器的Bert Bos，他们决定一起合作设计 CSS，于是创造了 CSS 的最初版本。1996 年 12 月，W3C 推出了 CSS 规范的第一版本。
- CSS2：1998 年，W3C 发布了 CSS 的第二个版本，目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的，包含了 CSS1 所有的功能，并扩充和改进了很多更加强大的属性。
- CSS3：2005 年 12 月，W3C 开始 CSS3 标准的制定，并遵循模块化开发，所以没有固定的发布时间，而是一段时间发布一些特性模块。

组成

CSS是一门基于规则的语言，你能定义用于你的网页中特定的元素的一组样式规则。这里面提到了两个概念，一是特定元素，二是样式规则。对应css的语法，也就是选择器（selects）和声明（eclarations）。

选择器：指定将要添加样式的HTML元素的方式。可以使用标签名，class值，id值等多种方式。

声明：形式为属性（property）：值（value),用于设置特定元素的属性信息。

属性：指示文体特征，列如font-size，width，background-color。

值：每一个指定属性都有一个值，该值指示你如何更改这些样式。

格式

选择器{

属性名：属性值；

}

举例

编程一个相机按钮

引入方式

内联样式

内联样式是css声明在元素的style属性中，仅影响一个元素

格式

<标签 style=“属性名：属性值；属性名：属性值”>内容</标签>

举例

虽然格式简单，但是样式作用无法复用到多个元素上，不利于维护

内部样式表

将css样式放在style标签中，通常<style>编写在HTML的head标签内部。

格式

<head>

<style>

选择器{

属性名：属性值;

}

</style>

<head>

举例

内部样式只能作用在当前页面上，如果是多个页面，就无法复用了

外部样式表

外部样式表是css附加到文档中的常见和最有用的方法，可以将css文件链接到多个页面，从而使用相同的样式表设置所有页面的样式。

外部样式表是指将css编写在扩展名为。css的单独文件中，并从HTML<link>元素引用它，通常<link>编写在HTML的head标签内部。

格式

rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入 css 文件固定值为stylesheet。

href：属性需要引用某文件系统中的一个文件。

举例

1.先创建style.css文件

h1 {
  color: blue;
  background-color: red
  border: 1px solid black;
}

2.link标签引入文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

注意

引入样式的优先级问题

规则层叠于一个样式表中，优先权由低到高：

浏览器
外部样式表
内部样式表（位于yu<head>标签内部
内联样式（在HTML元素内部）

选择器

每个css规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些

选择器是 CSS 的重要部分：

基本选择器：可以通过元素，类，id来选择元素。
属性选择器：可以通过属性值选择元素
伪类选择器：可以指定元素的某种状态，比如链接
组合选择器：可以组合基本选择器，更加精细的划分如何选择
伪元素选择器：可以为元素的某个部分设置样式

选择器的分类

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	`div{ }`
	类选择器	`.`	基于class属性值匹配元素	`.center{ }`
	ID选择器	`#`	基于id属性值匹配元素	`#username{ }`
属性选择器	属性选择器	`[]`	基于某属性匹配元素	`[type]{ }`
伪类选择器	伪类选择器	`:`	用于向某些选择器添加特殊的效果	`a : hover{ }`
组合选择器	后代选择器	`空格`	使用`空格符号`结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	`.top li{ }`
	子级选择器	`>`	使用 `>` 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	`.top > li{ }`
	同级选择器	`~`	使用 `~` 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后续兄弟元素	`.l1 ~ li{ }`
	相邻选择器	`+`	使用 `+` 结合两个选择器，基于第一个选择器，匹配第二个选择器相邻的后续兄弟元素	`.l1 + li{ }`
	通用选择器	`*`	匹配文档中的所有内容	`*{ }`

基本选择器

元素选择器

选择器：

/* 选择所有 li 标签,背景变成蓝色 */
li{
    background-color: aqua;
}

页面元素：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

类选择器

选择器：

/* 选择 class 属性值为 l2 的,背景变成蓝色 */
.l2{
    background-color: aqua;
}

/* 选择 class 属性值为 olist l2的,字体为白色 */
.olist.l2{
   color: wheat;
}

页面元素：

<div>
    <ul>
        <li class="ulist l1">List item 1</li>
        <li class="l2">List item 2</li>
        <li class="l3">List item 3</li>
    </ul>
    <ol>
        <!--class 为两个值-->
        <li class="olist l1">List item 1</li>
        <li class="olist l2">List item 2</li>
        <li class="olist l3">List item 3</li>
    </ol>
</div>

ID选择器

选择器：

#two{
    background-color: aqua;
}

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

通用选择器

选择器：

/* 所有标签 */
*{
    background-color: aqua;
}

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

属性选择器

选择器

页面

伪类选择器

伪类选择器用于选择处于特定状态的元素，列如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。格式：标签名：伪类名{}

常用伪类

锚伪类

在支持css的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;}    /* 未访问的链接 */
a:visited {color:#00FF00;}    /* 已访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标悬停链接 */
a:active {color:#0000FF;}    /* 已选中的链接 */

注意：伪类顺序link，viited，hover，active，否则有可能失效。

HTML 代码 ： 
<div>
    <a class="red" href="http://www.baidu.com">百度</a> <br/>
    <a class="blue" href="http://www.qq.com">QQ</a>
</div>


CSS 代码 ： 
/* 选择 a 标签,class 值为 red,设置访问后为红色链接*/
a.red:visited {
    color: red;
}

组合选择器

组合选择器在CSS中用于选择具有特定关系的元素，组合选择器一般分为：后代选择器，子级选择器，同级选择器，相邻选择器

后代选择器

.l1 li{
    background-color: aqua;
}

子级选择器

.l1 > li{
    background-color: aqua;
}

同级选择器

p ~ ul {
    color: red;
}

相邻选择器

p + ul {
    color: red;
}

伪元素选择器

css伪元素选择器是一种特殊的选择器，它允许你为元素的某个部分设置样式，而不需要在HTML中添加额外的标签。伪元素选择器通常以双冒号（：：）开头。以下是一些常见的css伪元素选择器：

：：before：用于在元素内容之前插入生成内容。
：：after：用于在元素内容之后插入生成的内容。
：：first-letter：用于伪元素的第一个字母设置样式。
：：first-line：用于伪元素的第一行文本设置样式。
：：selection：用于为用户选中的文本设置样式。
：：placeholder：用于为输入框的占位符文本设置样式。
：：marker：用于为列表项的标记设置样式。
：：file-selector-button：用于为文件输入元素的选择按钮设置样式。

这些伪元素选择器可以与其他选择器一起使用，以实现更复杂的样式设置。列如，你可以使用P：：firine选择器为所有段落的第一个字母设置特殊样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        p::first-line {
            color: blue;
        }
    </style>
</head>
<body>
    <p>
    这是一个段落，我们将为它的第一行添加特殊样式。<br>
    Hello World!
    </p>
    <p>
    Hi!!!
    </p>
</body>
</html>

：：before伪元素选择器用于在元素内容之前插入生成的内容。以下是一个简单的列子，展示了如何认识使用：：before为一个无序列表（ul）添加自定义的项目符号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
        ul {
            list-style-type: none;
        }
        
        ul li::before {
            content: "• ";
            color: red;
            font-weight: bold;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
            
        }
    </style>
</head>
<body>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
    </ul>
</body>
</html>

在这个例子中，ul li::before 选择器会在每个列表项（<li>）的内容之前插入一个红色的圆圈。content 属性用于指定要插入的内容，color 属性用于设置文本颜色，font-weight 属性用于设置文本加粗，display 属性设置为 inline-block 以确保生成的元素与其他文本在同一行显示，width 和 margin-left 属性用于调整项目符号的位置。

现在，当你加载HTML页面时，你会看到每个列表项前都有一个红色的圆圈作为项目符号。