基本语法

最新推荐文章于 2022-07-18 18:14:56 发布

*Major*

最新推荐文章于 2022-07-18 18:14:56 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/qq_41375318/article/details/108903702

版权

$基本语法$

2.1 引入方式

2.1.1 内联样式

了解,几乎不用,维护艰难

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

格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>

举例：

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
    Hello World!
</h1>

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

2.1.2 内部样式表

内部样式表是将CSS样式放在style标签中，通常style标签编写在HTML 的head标签内部。

格式：

<head>
    <style>
        选择器 {
            属性名: 属性值;
            属性名: 属性值;
        }
    </style>
</head>

举例：

  <head>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
    </style>
  </head>

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

2.1.3 外部样式表

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

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

格式：

<link rel="stylesheet" href="css文件">

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

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

举例：

创建styles.css文件

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

link标签引入文件

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

效果如下：

当然也可以把CSS文件放在其他地方，并调整指定的路径以匹配

<link rel="stylesheet" href="css/styles.css">

为了保证CSS文件的管理，建议在项目中创建一个css文件夹，专门保存样式文件。

注意：引入样式的优先级问题。

规则层叠于一个样式表中，其中数字 4 拥有最高的优先权：

浏览器缺省设置
外部样式表
内部样式表（位于标签内部）
内联样式（在 HTML 元素内部）

2.2 关于注释

了解讲解：

简单格式，提一下就可以了

与HTML一样，鼓励您在CSS中进行注释，以帮助您理解几个月后返回的代码工作方式，并帮助其他使用该代码的人对其进行理解。

CSS中的注释以/*和开头*/。在下面的代码块中，我已使用注释标记了不同的不同代码段的开始。

格式：

/* 设置h1的样式 */
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

2.3 关于选择器

重点讲解：

选择器作为CSS的重要部分，这里强调基本选择器的使用和其他选择器的基本格式。

讲到CSS就不得不说到选择器，为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。

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

接下来我们将要详细的学习各种选择器的使用。

选择器的分类：

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

2.2.1 基本选择器

1）元素选择器

页面元素：

<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>

选择器：

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

2）类选择器

页面元素：

<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>

选择器：

选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}

3）ID选择器

页面元素：

<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>

选择器：

#tow{
    background-color: aqua;
}

效果如图：

4）通用选择器

页面元素：

<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;
}

2.2.2 属性选择器

页面元素：

   <ul class="l1">
        <li  >List item 1</li>
        <li  >List item 2</li>
        <li  >List item 3</li>
    </ul>
    <ul class="l2">
        <li  id="four">List item 1</li>
        <li  id="five">List item 2</li>
        <li  id="six">List item 3</li>
    </ul>

    <p class="">
        p item
    </p>

选择器和效果图，示例1

[属性名]{ }

选择器和效果图，示例2

标签名[属性名]{ }

选择器和效果图，示例3

标签名[属性名='属性值']{ }

2.2.3 伪类选择器

伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。

格式：

标签名:伪类名{ }

常用伪类:

锚伪类

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

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

注意：

伪类顺序 link ，visited，hover，active，否则有可能失效。

代码示例：

HTML 代码 ： 
<div>
    <a class="red" href="http://www.itheima.com">黑马</a> <br/>
    <a class="blue" href="http://www.itheima.com">传智</a>
</div>


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

2.2.4 组合选择器

页面元素：

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

1）后代选择器

选择器：

.l1 li{
    background-color: aqua;
}

2）子级选择器

选择器：

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

3）同级选择器

选择器：

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

4）相邻选择器

选择器：

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

2.4 总结

CSS的引入方式有三种，建议使用外部样式表。
注释类似于java多行注释。
选择器是CSS的重要部分：
1. 基本选择器：可以通过元素，类，id来选择元素。
2. 属性选择器：可以通过属性值选择元素
3. 伪类选择器：可以指定元素的某种状态，比如链接
4. 组合选择器：可以组合基本选择器，更加精细的划分如何选择

*Major*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基本语法

基本语法基本语法基本语法2.1 引入方式2.1.1 内联样式了解,几乎不用,维护艰难内联样式是CSS声明在元素的style属性中，仅影响一个元素：格式：<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>举例：<h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Hello World!</h1>虽然
复制链接

扫一扫