css样式引入方式和选择器

最新推荐文章于 2023-07-27 20:54:01 发布

lxr_99

最新推荐文章于 2023-07-27 20:54:01 发布

阅读量130

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lxr_99/article/details/117618964

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、css样式引入方式

1.行内样式

结合style，再加上对应样式。
行内样式添加在要修改样式的标签位置

示例：

<html>
<head>
<title>行内样式</title>
</head>
<body>
<h1 style="color:blue">标题标签</h1>
</body>
</html>

结果：

2.内嵌样式

页面样式，使用style标签嵌在head标签里

示例：

<html>
<head>
<title>内嵌样式</title>
  <style type="text/css">
     h1{
        color:pink;
    }
  </style>
</head>
<body>
    <h1>标题标签</h1>
</body>
</html>

结果：

3.外链样式

link标签

把css样式单独写在css文件中，通过link标签的href属性引入

示例：

<html>
<head>
<title>外链样式</title>
  <link rel="stylesheet" type="text/css" href="css01.css">
</head>
<body>
    <h1>标题标签</h1>
</body>
</html>

css文件代码：

h1{
        color:tomato;
    }

结果：

注意：

外链样式与内嵌样式都在head内，但内嵌样式是在style里设置样式，外链样式是在link里引用css文件设置的样式。

4.导入样式

导入式写在head标签内的style标签。

示例：

<html>
<head>
<title>导入样式</title>
  <style type="text/css">@import url(css01.css);</style>
</head>
<body>
    <h1>标题标签</h1>
</body>
</html>

css文件代码：

 h1{
        color:orange;
    }

结果：

5.优先级

理论上认为优先级从高到低为：行内样式 > 内嵌样式 > 外链样式 > 导入样式

实际操作上优先级是：就近原则

二、选择器

语法结构

选择器{

属性：属性值

}

1.简单选择器

根据名称、id、类来选取元素

css元素选择器：

hn，a，p，em元素，也可以是html元素本身

1.1 基本选择器

应用最广泛，用在head中style标签中

基本选择器	例子
标签选择器（根据标签名获取）	标签名{color:blue}
id选择器（根据id属性	#id{color: yellow}
类选择器（class属性）	.class{color: red}
通用选择器（通配符*）不建议	*{color: aqua}

优先级： id选择器>类选择器>标签选择器>通用选择器

2.组合选择器

后代选择器 (空格)

子选择器 (>)

相邻兄弟选择器 (+)

通用兄弟选择器 (~)

分组选择器（逗号选择器，使用逗号给多个标签使用样式）

3.伪类选择器

伪类用于定义元素的特殊状态

同一个标签，不同的状态，有不同的样式，使用冒号表示

:link	链接点击之前
:visited-	链接被访问过
:hover	悬停
:active	鼠标点击标签但不松手
:focus	获得焦点

示例：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style type="text/css">
	    a:link{color: blueviolet}
	    a:visited{color:pink }
	    a:hover{color:lightskyblue }
	    a:active{color: indianred}
	</style>
</head>
<body>
	<a href="">链接</a>
</body>
</html>

点击前：

鼠标点击但不松手：

悬停：

访问过：

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

4.伪元素选择器

css3中的 ::before ::after :: 必须写content

区分伪类和伪元素

css2中的 :before :after

在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。

5.属性选择器

1.1 a[target]{ background-color: yellow;}------选取所有带有 target 属性的 <a> 元素

1.2 a[target="_blank"]{background-color: yellow;}-----选取所有带有 target="_blank" 属性的 <a> 元素

1.3 [title~="flower"]{border: 5px solid yellow;}----选取title属性包含“flower”单词的所有元素

可以是一个单词+flower，flower本体不能变（如flowers）

2.1 input[type*=e]{color: pink}----------type内包含e

2.2 input[type^=e]{color: blueviolet}-------------type首字母为e

2.3 input[type$=rl]{color: lightskyblue}------------type结尾为rl

序列为2的：值不必是完整单词！
3.1 [class|="top"]{background: yellow;}------选取 class 属性以 "top" 开头的所有元素

值必须是完整或单独的单词，（如 class="top" 或者后跟连字符）

lxr_99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css样式引入方式和选择器

一、css样式引入方式1.行内样式2.内嵌样式3.外链样式4.导入样式二、选择器语法结构选择器{属性：属性值属性：属性值}1.简单选择器根据名称、id、类来选取元素HTML元素选择器 id #id class .class p p p，div p，div css元素选择器：hn，a，p，em元素，也可以是html元素本身2.组合选择器3.伪类选择器4.伪元素选择器css2中的...
复制链接

扫一扫