CSS笔记（一）：语法 选择器 伪类

最新推荐文章于 2024-04-14 14:25:59 发布
最新推荐文章于 2024-04-14 14:25:59 发布
阅读量169 收藏
点赞数
分类专栏： web前端 CSS 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37831759/article/details/119992772
版权

基本语法

 <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style>
            p {
                color: red;
                font-size: 30px;
                text-decoration: underline;
                font-weight: bold;
                text-align: center;
                font-style: italic;
            }
            h1 {
                color: blue;
                font-size: 50px;
                font-weight: bold;
                background-color: pink;
            }
        </style>
    </head>

css的代码用标签<style>来代表

使用选择器选择标签、样式（class）或者id后，在后面的代码中写好样式语句

css的语法格式相当于键值对

选择器 {
    k: v;
    k: v;
    k: v;
    k: v;
}
选择器 {
    k: v;
    k: v;
    k: v;
    k: v;
}

常见css属性：

  • 字号大小：（fos）
 font-size:40px;
  • 背景颜色：（bgc）
background-color: blue;
  • 加粗：（fwb）
font-weight: bold;

除了上述写法外，css还有两种写法

  • 行内式
<p style="color:white;background-color:red">hihi</p>
  • 内嵌式

即上文所述方式

  • 外部css文件

（1）采用标签。例如：

<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

（2）采用 import，必须写在

@import url(a.css) ;

选择器

标签选择器：针对一类标签

div{
	border:1px;
}

ID 选择器：针对某一个特定的标签使用

#myid{
	border:3px;
}

类选择器：针对你想要的所有标签使用

.class{
	color:blue;
}

伪类选择器

伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

蔚蓝色的风暴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS笔记】CSS三种样式表、CSS样式表优先级、CSS选择器
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-19 760
CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。CSS编写的规则分为两部分，分别是：选择器、声明块。声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。h1 {}
css笔记2：复合选择器、display、line-height、background、css的三大特性、注释
小黄呀呀呀的博客
04-23 186
1. CSS复合选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 1.1 后代选择器（重点）中间用空格，子孙后代 概念： 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的子...
【Css】Css有关html“伪类选择器”的语法合集（示例）
【敦厚的曹操】的专栏
12-27 314
<!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" /> <tit.
伪类选择器
JQG的博客
09-17 372
伪类选择器                      a:link {                 color:red;             }             a:visited {                 color:green;             }             a:hover {                 color:yel
HTML初识4
chp12520的博客
11-21 143
定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定。
伪类选择器和伪类元素的用法
weixin_42446516的博客
01-19 438
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
CSS 伪类选择器
Jacoh的专栏
02-26 428
CSS 伪类选择器 :first-child 兼容性：IE8+、FireFox、Chrome、Safari、Opera &lt;style&gt; section:first-child { color: yellowgreen; } &lt;/style&gt; &lt;!-- 只有第一个section 被选中 --&gt; &lt;section&gt; &lt;di...
【温故知新】CSS学习笔记（后代和子代选择器）
12-21
若要将带有`.hello`类的`p`元素颜色设为紫色，可以添加额外的类选择器： ```css div p { color: deeppink; } .hello p { color: purple; } ``` 2. 子代选择器 与后代选择器不同，子代选择器只选择指定元素的...
CSS笔记（黑马程序员pink老师前端）选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景
qq_43701213的博客
09-04 678
(1)生成标签:直接输入标签名按tab键即可. 如输入div然后按tab键，可以生成< div> < /div>(6)如果生成的类名是有顺序的，可以用自增符号$. 如div#demo $*5.(去掉demo后的空格)基础选择器的组合.包括后代选择器,子元素选择器,并集选择器,伪类选择器(链接伪类,focus伪类).精确位置,两个轴顺序不可变,上述为距左侧20px.距上方50px,若只有一个坐标,必定是x轴坐标./*将行内元素a，转换为可以设置宽高的块级元素，增加点击的范围,此时一行只能有一个 */
css笔记css笔记css笔记
04-03
2. CSS 基础选择器： - **标签选择器**（Element Selectors）：通过元素名来选中所有该类型的元素，如 `p {color: red;}` 会改变所有段落的文本颜色。 - **类选择器**（Class Selectors）：使用点号 `.class` 来...
CSS ::Selection的使用方法
weixin_30919429的博客
12-09 222
大家都知道浏览器对选中的文本默认样式都是统一的，Windows下是一个深蓝色的背景，白字的前景，而在Mac下是一个淡蓝色背景，白色字体，就如上图所展示的一样，自从有了这个“::selection”选择器后，我们在部分浏览器中可以设置你所需要的样式，下面就让我来告诉大家如何使用这个“::selection”来改变在浏览器中选中文本后的背景色与前景色。 ::selection使用语法： /*...
CSS 语言伪类选择器
歪脖先生的博客
02-11 794
语言伪类选择器CSS 语言伪类选择器，用来匹配使用指定语言的元素。对使用多语言版本的网站，可以根据不同语言版本，设置不同的样式。表 2-9 语言伪类选择器选择器功能描述版本E:lang(language)选择使用指定语言，即lang属性等于language的E元素2在HTML 中，可以通过元素的 lang属性，来定义该元素所使用的语言。如： &lt;body lang = "en"&gt; &lt...
CSS伪类语法
weixin_30770783的博客
11-24 119
CSS伪类用于向某些选择器添加特殊的效果，在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 CSS伪类 CSS伪类用于向某些选择器添加特殊的效果。 CSS定位属性 CSS伪类的语法： selector:pseudo-class{property:value;}C...
CSS3伪类选择器
小头Sophia
12-24 963
1.以前用的伪类选择器: :hover :link :active :visited CSS3中新增的伪类选择器: 1) E:first-child                  E:(Elements)元素 2)E:last-child 3)
CSS基础之伪类选择器（如果想知道CSS的伪类选择器知识点，那么只看这一篇就足够了！）
最新发布
秋刀鱼不做梦的编程日常
04-14 4020
CSS基础之伪类选择器（如果想知道CSS的伪类选择器知识点，那么只看这一篇就足够了！）
常见结构伪类选择器的用法
weixin_49596018的博客
08-01 466
常见结构伪类选择器的用法
常用的伪类选择器
请 端正你的态度的博客
08-10 3605
链接伪类选择器 主要有以下几类： a:link 未访问链接时属性 a:visited 访问后的属性 a:hover 鼠标放上去时的属性 a:active 点击后的属性 代码示例： a:link {color: red} a:visited; {color: yellow} a:hover {color: blue} a:active {color: orange} <a href="#"> 这是一个a标签 </a> 结构伪类选择器 :first-child
【CSS 知识总结】第四篇 - CSS 选择器-伪类和伪元素
BraveWangDev
03-20 2268
CSS 的三大特征；CSS 选择器的优先级；CSS 优先级的计算规则；CSS 选择器的权重；CSS 选择器面试题；本篇，介绍 CSS 选择器：伪类和伪元素；伪类用于定义元素的特殊状态；同一元素，根据不同状态，显示不同样式，样式随状态（用户行为）变化而变化；与普通 CSS 类相比较，伪类选择器只有处于 dom 树无法描述的状态下，才能为元素添加样式；所以被称作伪类；CSS 伪元素用于设置元素指定部分的样式；；
CSS学习笔记：EMMET语法与选择器详解
- 伪类选择器：如`a:link`、`a:visited`、`a:hover`、`a:active`，分别对应链接的不同状态。 4. 元素选择模式和背景 在CSS中，可以通过元素选择器（如`div`）、类选择器（如`.class`）或ID选择器（如`#id`）来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值