css基础语法篇

最新推荐文章于 2024-09-09 19:00:27 发布
最新推荐文章于 2024-09-09 19:00:27 发布
阅读量93 收藏
点赞数
分类专栏： css3 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_52853236/article/details/112058627
版权

CSS基础语法篇

文章目录

一、css语法

1.CSS规则由两个主要的部分构成：选择器以及一条或多条声明
在这里插入图片描述
2.CSS选择器的作用：
（1）选择器通常是您需要改变样式的 HTML 元素。
（2）每条声明由一个属性和一个值组成。
（3）属性（property）是您希望设置的样式属性（style attribute）。
（4）每个属性有一个值。属性和值被冒号分开。

二、css如何创建

1.如何插入样式表

（1）外部样式表(External style sheet)
（2）内部样式表(Internal style sheet)
（3）内联样式(Inline style)

2.外部样式表

（1）语法：
在这里插入图片描述

3.内部样式表

（1）语法：在这里插入图片描述

4.内联样式表

在这里插入图片描述

三、css部分属性介绍

3.1 css background（背景）

1.CSS 属性定义背景效果

（1）background-color：定义了元素的背景颜色.
   补充：CSS中，颜色值通常以以下方式定义:十六进制 - 如：
    “#ff0000”
   RGB - 如：“rgb(255,0,0)”
   颜色名称 - 如：“red”
（2）background-image：属性描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

body
{
		background-image:url('gradient2.png');
		background-repeat:repeat-x;
}

（3）background-repeat：如果你不想让图像平铺，你可以使用 background-repeat 属性

body
{
		background-image:url('img_tree.png');
		background-repeat:no-repeat;
		background-position:right top;
}

补充知识点：背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置，可以利用 background-position 属性改变图像在背景中的位置:
（4） background-attachment：
   ①背景图像是否固定或者随着页面的其余部分滚动。
   ② background-attachment属性取值：
     i. scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定, 对于scroll，一般情况背景随内容滚动，但是有一种情况例外。对于可以滚动的元素（设置为overflow:scroll的元素），当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。
     ii. fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body 上。
     iii.local：背景图相对于元素内容固定
     iv:inhert:继承
（5） background-position：设置背景图像的起始位置
在这里插入图片描述

2.背景简写属性

（1）将这些属性合并在同一个属性中背景颜色的简写属性为 “background”:

body {background:#ffffff url('img_tree.png') no-repeat right top;}

3.2 text（文本）

1.字体属性

（1）设置字体：
在这里插入图片描述
（2）字体大小：
在这里插入图片描述
（3）字体粗细：在这里插入图片描述
（4）文字样式：
在这里插入图片描述
（5）字体复合属性：在这里插入图片描述
（6）字体属性总结：在这里插入图片描述

2.文本属性

（1）CSS Text（文本）属性可定义为文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
在这里插入图片描述

（2）文本颜色
在这里插入图片描述
补充：HSL（H（色相），S （饱和度），L（亮度））

（3）对齐文本
在这里插入图片描述

（4）装饰文本
在这里插入图片描述

（5）文本缩进
在这里插入图片描述

大小
rem相对于根元素的一个字体大小
em等于你当前设置字体的一个字体大小

（6）行间距
在这里插入图片描述

四、选择器

4.1 标签选择器

（1）用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
（2）语法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	p//标签名{
    color:red;//属性：属性值
    text-align:center;
	}
  </style>
</head>
<body>
	<p>Hello World !<p>
</body>
</html>

4.2 类选择器

（1）如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	.center {text-align:center;}//类标签选择器
  </style>
</head>
<body>
	<div class="center">Hello World !<div>
</body>
</html>

4.3 id选择器

（1）HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义
（2）语法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  	#para1//id标签选择器
	{
    	text-align:center;
    	color:red;
	}
  </style>
</head>
<body>
	<div id="center">Hello World !<div>
</body>
</html>

（3）id选择器和类选择器的区别：
在这里插入图片描述

4.4 复合选择器（交集选择器）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div.first {/*复合选择器，只选中div标签中class为first的元素*/
      color: red;
    }
  </style>
</head>
<body>

  <div class="first">Hello world !</div>
  <p class="first">Hello world !</p>

</body>
</html>

4.5 选择器分组（并集选择器）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div, p, .first{/*并集选择器*/
      color: red;
    }
  </style>
</head>
<body>

  <div >Hello world !</div>
  <p >Hello world !</p>
  <span class="first" >Hello world !</span>
</body>
</html>

4.6 关系选择器

1.子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    div > span{
      color: red;
    }
  </style>
</head>
<body>
<div>我是父元素
  <p>我div是子元素
    <span>我是后代元素 </span>
  </p>
  <span>我是span子元素</span>
</div>

</body>
</html>

2.后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    div span{
      color: red;
    }
  </style>
</head>
<body>
<div>我是父元素
  <p>我div是子元素
    <span>我是后代元素 </span>
  </p>
  <span>我是span子元素</span>
</div>

</body>
</html>

3.选择兄弟标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    p + span{/*选择p的下一个兄弟元素span，将+换为~表示将p元素后的所有span标签元素选中*/
      color: red;
    }
  </style>
</head>
<body>
<div>我是父元素
  <p>我div是子元素
    <span>我是后代元素 </span>
  </p>
  <span>我是span子元素</span>
</div>

</body>
</html>

4.7 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    p[title]{/*选中P标签中带title属性的元素，p[title=first],则表示只选择P标签中带title属性且属性值等于first的元素*/
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p title="first">Hello World !</p>
  <p >Hello World !</p>
  <p >Hello World !</p>
</div>

</body>
</html>

4.8 伪类选择器

1.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>关系选择器</title>
  <style>
    ul > li:first-child{/*伪类元素选择器，选中该标签当前第一个子元素*/
      color:red
    }
    ul >li:nth-child(3){
      color:blue
    }
    ul >li:not(:nth-child(4)){/*去除伪类选择器选中的元素（ <li>第三个</li>）*/
      color: green;
    }
    ul >li:not(:nth-of-type(4)){/*去除伪类选择器选中的同类型元素（<li>第四个</li>）*/
      color: green;
    }

  </style>
</head>
<body>
<ul>
  <span>我是span标签</span>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
</ul>

</body>
</html>

2.超链接的伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    a:link{
      color:red
    }
    a:visited{
      color: yellow;
    }
    a:hover{
      color: blue;
    }
    a:active{
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">没访问过的链接</a>
  <a href="#">访问过的链接</a>
  <a href="#">鼠标移入链接</a>
  <a href="#">鼠标点击</a>

</body>
</html>

4.9 伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    p::first-letter{/*选择段落中第一个字母设置样式*/
      font-size: 50px;
    }
    p::first-line{/*选择段落中第一个行设置样式*/
      color: red;
    }
    p::before{
      content:"只能通过css在元素开始添加内容"
    }
    p::after{
      content:"只能通过css在元素最后添加内容"
    }
  </style>
</head>
<body>
  <p> Hello World !</p>
</body>
</html>

4.10 通配符选择器

（1）在曾CSS中，通配符选择器使用“*”定义，他表示选择页面中所有的元素（标签）,常用通配符选择器来去除浏览器的默认样式
（2）语法：在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
	<div class="center">Hello World !<div>
</body>
</html>```

3.补充：书写样式可通过引入normalize.css和reset.css来实现清除浏览器的默认样式

normalize对默认样式进行统一，保证不同的浏览器的默认样式一致
reset.css清除浏览器的所有默认样式

4.11 继承

1.样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素中
2.继承是发生在祖先和后代之间的
3.并不是所有样式都会被继承，如背景、布局等就被会被继承

4.12 选择器的权重

1.当我们用把不同的选择器选中同一个元素并为该元素修改样式时，会发上样式冲突，此时我们需要根据不同选择器的权重来书写和判断，最终哪个选择器会成功选中该元素并修改它的样式
2.选择器的权重

选择器样式
内联样式1,0,0,0
id选择器0,1,0,0
类和伪类选择器0,0,1,0
元素选择器0,0,01

3.权重越高，则会选择该选择器；注意选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
4.如果优先级相同，则会选择里该元素最近的样式
5.可以在某一个样式后面添加！important则此时该样式的优先级超过了内联样式的优先级，拥有最高的优先级（慎用）

7--up
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础与语法规范
m0_50871322的博客
12-22 569
CSS基础与语法规范
css基础语法
weixin_50995831的博客
10-29 132
<!-- css语法 1.css代码写在哪儿 内联样式表：将css代码写在标签的style属性中 内部样式表：将css代码写在style标签中 外部样式表：将css代码写在外部css文件中 2.css语法本身 语法 选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...} 说明 选择器 - 选中当前需要添加样式的标签（内联样式表中选择器{}）需要省略 属性 - 属性名有哪些是固定的，不同的样式有对应的固定属性 属性值如果表示的是数值大小必须加单位
【CSS】基础语法
小数点儿_
09-09 2558
叠层样式表HTML 内嵌&内联&外联——它们之间的优先级如何？静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。前端 css class 嵌套/选择器总结(目的:识别 less 文件中嵌套的写法) 1.1.2 响应式写法 class 与 style 是 HTML 元素的属性，用于设置元素的样式，可以用 v-bind 来设置样式属性 :class 指令也可以与普通的 class 属性共存。 1.1.3
CSS常用语法总结【精华篇】
Zincy星辰
04-12 3396
CSS常用语法总结 引用方式 注释方法：/* …… */ CSS中不区分大小写，变量命名使用 - 来分割 内部样式 通过 style 标签，把CSS代码嵌入到HTML内部，使用选择器{ } <style> p { color: rgb(156, 163, 53); font-size: 30px; } </style> <p>这是一个段落</p&g
CSS基础语法
dislido的博客
07-25 380
CSS基础语法 选择器 标签选择器 类选择器 id选择器 通配符选择器 后代选择器 子代选择器 相邻选择器 伪类选择器 属性 文本 背景CSS基础语法选择器标签选择器p{ color:red; } /*选择所有<p>标签，字体设置为红色*/类选择器.red{ color:red; } /*选择所有class="red"的标签，字体设置为红色*/id选择器#red{ color:red;
学渣代表HTML知识基础语法篇
01-20
学习HTML的基础语法是成为网页开发者的首要步骤。通过熟练掌握HTML标签、属性、元素结构，你可以开始创建自己的网页，并逐渐深入到更复杂的CSS样式和JavaScript交互。记住，实践是提升技能的关键，多写代码，多尝试...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
一篇文章，带你详细了解CSS基础知识
PICACHU+++的博客
10-25 3631
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]
Html与CSS基础知识篇（HTML标签语法篇）
yyxhzdm的博客
03-15 455
HTML和CSS的关系 学习Web前端开发基础技术需要掌握：Html、CSS、JavaScript语言。下面我们大致了解一下这三门技术都用来实现什么： （1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、多媒体等。 （2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或者标题加入北京图片、边框等。所有这些用来改变内容外观的东西称之为表现 （3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景
【css】获取最后一个li进行样式特殊处理
qq_43720551的博客
09-05 526
每项列表项添加一个margin，最后一个元素不添加。子元素，以便CSS选择器能够正确地应用样式。伪类选择器来选择列表中的最后一个。有个列表，列表项之间有一段间隔。确保在你的HTML代码中，你可以使用 CSS 的。
CSS之我不会
m0_51492817的博客
09-05 820
作用：选择页面上的某一个后者某一类元素。
CSS-1
Nozomi9967的博客
09-07 322
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。词列表方法为一个元素同时设置多个样式。，但只可以用类选择器的方法实现，作用：可以选中所有html元素。的（不能使用 ID 词列表）。行内样式>内部样式=外部样式。
用CSS 方式设置 table 样式
weixin_45274678的博客
09-09 851
在现代Web开发中，使用CSS来设置table的样式是一种常见且强大的方法，它能让你的表格数据既美观又易于阅读。下面我将通过一个示例来展示如何使用现代CSS技巧来美化表格。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1829
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
用HTML写一个动态的的电子相册实战详细案例
weixin_47139678的博客
09-05 655
用HTML写一个动态的的电子相册实战详细案例
【CSS in Depth 2 精译_027】4.4 Flexbox 元素对齐、间距等细节处理（下）+ 4.5 本章小结
最新发布
PeacefulWinter的博客
09-09 1309
本篇为《CSS in Depth》最新第2版4.4节的后半部分内容，主要介绍了弹性子元素上两个常用属性 align-self 与 order 的用法，接着使用本章介绍的其他属性，完成示例页面最后一个部分（价格区）的样式设置，并对其中的一些细节问题进行了讨论。感兴趣的朋友可以跟着作者的思路，在本地动手实操一下，以加深印象。建议收藏。
json字符串CSS格式化
yang295242361的博客
09-06 609
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于读写，而且易于机器解析和生成。CSS（Cascading Style Sheets）则是一种用来描述HTML或XML文档外观的样式语言。要想将JSON字符串以CSS格式化的方式显示，通常需要将JSON字符串转化成HTML元素，并应用CSS来进行样式化处理。
纯CSS实现卡片欢动效果
qq_38880880的博客
09-05 346
【代码】纯CSS实现卡片欢动效果。
css flex与inline-flex的区别
花花鱼的专栏
09-08 471
css flex与inline-flex的区别及效果展示
CSS基础教程：理解与应用基础语法
"这篇教程主要讲解了CSS基础语法，包括行内样式、内嵌样式、链接样式和导入样式的概念和用法，以及CSS选择器的分类，如HTML标签选择器、群组选择器、包含选择器、Class选择器和ID选择器。" 在CSS中，样式表语言用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值