CSS3 基础属性 第一个模块

最新推荐文章于 2022-08-07 09:03:23 发布
最新推荐文章于 2022-08-07 09:03:23 发布
阅读量933 收藏 2
点赞数
分类专栏： HTML+CSS+JavaScript 文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51596354/article/details/122459319
版权
这篇博客介绍了CSS3的基本概念和使用方法，包括CSS的创建（外部、内部和内联样式）、简单选择器（元素、d和class选择器）、背景颜色和图片、文本样式、字体和单位。此外，还探讨了选择器优先级和超链接样式，并提供了多个实践作业，如艺术字、按钮和菜单效果的实现。
摘要由CSDN通过智能技术生成

第04章-前端核心技术-CSS3基础属性

学习目标

  1. 了解CSS是什么
  2. 掌握CSS的简单使用
  3. 掌握CSS样式创建和引入的方法重点
  4. 掌握CSS背景的使用重点
  5. 掌握CSS文本的样式重点
  6. 掌握CSS连接的样式重点

CSS简介

什么是 CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 定义如何显示 HTML 元素
  • 多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y5cLoS24-1641981801630)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111113902633.png)]

  • 选择器通常是您需要改变样式的 HTML元素。
  • 每条声明由一个属性和一个值组成。
  • 属性（property）是您希望设置的样式属性（style attribute）。
  • 每个属性有一个值。属性和值被冒号分开。

CSS 创建（引入方式）

插入样式表的方法有三种:

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

外部样式表

外部样式需要创建独立的css文件，并且使用link标签引入，推荐使用

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

内部样式表

内部样式直接在html文件内部使用style标签引入，通常放在head标签中

<head>
	<style>
 		hr {
    color:sienna;} 
		p {
    margin-left:20px;} 
		body {
    background-image:url("images/back40.gif");} 
	</style> 
</head>

内联样式

内联样式直接在某个标签上通过style属性的引入，必须依赖与某个标签，不通用，但是优先级最高

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）> （内部样式）>（外部样式）> 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS简单选择器

选择器用于选择哪些元素

元素选择器（选一种元素）

p {
    text-align:center;
}

设置HTML文档中所以 p 标签的文字居中对齐。

d 选择器（选一个）

id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器。CSS 中 id 选择器以 # 来定义。

#abc {
   text-align:center;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器（选多个）

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示，在 CSS中，类选择器以一个点.号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

三种选择器优先级

id选择器（选一个） > class选择器（选多个） > 元素选择器 （选一种元素）

CSS 尺寸

尺寸主要指宽度和高度属性

属性 描述
height 设置元素的高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

注：width: 200px; margin: auto;可以让 区块元素 居中。

注：给上级元素添加text-align: center属性可以让 内联元素 居中，因为内联元素等同于文字处理。

CSS 背景颜色

属性 描述
background-color 设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）

rgb

RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。

  • 红色（R）
  • 绿色（G）
  • 蓝色（B）

hsl

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

  • 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
  • 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
  • 亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
值 描述
hue - 色相 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度 定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度 定义亮度 0% 为暗, 50% 为普通, 100% 为白

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mxB2Zsjf-1641981801633)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111114714703.png)]

案例05

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#bg{
    
                height: 200px;
                /* 1.颜色单词 */
                background-color: red;
                /* 2.三位16进制 */
                background-color: #F56;
                /* 3.六位16进制 */
                background-color: #0000FF;
                /* 4.rgb(255,255,255) */
                background-color: rgb(10,255,125);
                /* 5.rgba(255,255,255,1) */
                background-color: rgba(10,255,125,1);
                /* 6.hsl(360,100%,100%) */
                background-color: hsl(0,100%,50%);
                /* 7.hsla(360,100%,100%,1) */
                background-color: hsla(0,100%,50%,0.1);
			}
		</style>
	</head>
	<body>
		<div id="bg"></div>
	</body>
</html>

效果展示

在这里插入图片描述

CSS 背景图片

背景图片包括多个属性，可以分别设置也可以合并设置

属性 描述
background-color 设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）
background-image 设置背景图片（url(img/logo.png)）
background-repeat 设置背景图片是否重复（no-repeat、repeat）
background-attachment 设置背景图片是否固定（scroll、fixed）
background-position 设置背景图片的位置（left、right、top、bottom、center、%、px）
background-size（不可合并） 设置背景的大小（px、%、cover、contain）

注意：background属性设置多个背景时，用逗号分隔开来。

background-size属性

值 描述
像素 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
百分比 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h2SocguC-1641981801634)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111111313349.png)]

CSS 文本

文本属性有很多，常用的如下，描述中括号内的内容需要重点记忆

属性 描述
color 设置文本颜色（纯文字）
direction 设置文本方向（ltr：[left to right]；rtl）
unicode-bidi 设置文本是否被重写（bidi-override）
letter-spacing 设置字符间距 （像素单位px，百分比单位）
word-spacing 设置字（单词间的空格）间距（像素单位px，百分比单位）
white-space 设置元素中空白的处理方式（pre：保留空格和换行；pre-line：只保留换行；nowrap：不保留空格和换行；normal：默认）
vertical-align 设置元素的垂直对齐（表格、图片、内联元素）（top、middle、bottom）
text-align 水平对齐元素中的文本（内联子元素）（left、right、center）
text-decoration 向文本添加上、中、下划线（overline、line-through、underline、none）
text-indent 缩进元素中文本的首行（像素单位px，百分比单位）
text-transform 控制元素中的字母（lowercase、uppercase）

CSS3 文字阴影

语法：

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow属性设置多重阴影文本，用逗号分隔开来。

属性值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size/line-height 指定文本的字体大小
font-style 指定文本的字体斜体（斜体：italic）
font-weight 指定字体的粗细（100：不加粗；900：加粗【bold】）。
font-variant 以小型大写字体或者正常字体显示文本。（small-caps）

font属性合并写法的顺序：

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height
  5. font-family

如果行高和高度一样，可以简单的让单行文字垂直居中。

height:50px;
line-height:50px;

字体系列

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明：

p{
	font-family:"楷体","微软雅黑";
}

CSS单位

绝对单位：（像素单位）

设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;} 像素
p {font-size:14pt;} 像素点

相对大小：(可变单位)

  1. Em：相对于直接上级的元素的字体大小来设置大小
  2. Rem：相对于html的元素字体大小来设置大小
  3. 百分比：相对于元素自身的大小来设置大小
  4. vw : 1vw 等于视口宽度的1%
  5. vh : 1vh 等于视口高度的1%
  6. vmin : 选取 vw 和 vh 中最小的那个
  7. vmax : 选取 vw 和 vh 中最大的那个

浏览器默认大小和普通文本段落一样，是16像素（16px=1em）。

如果上级元素的字体大小为20px，则（20px=1em）。

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

上面的例子，em的文字大小是与前面的例子中像素一样。

不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

CSS 超链接属性

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接 ：蓝色
  • a:visited - 用户已访问过的链接 ：紫色
  • a:hover - 当用户鼠标放在链接上时 ：鼠标悬浮
  • a:active - 链接被点击的那一刻 ：红色

注意： a:hover 必须在 a:link 和 a:visited 之后写，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPluEprX-1641981801634)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220111173514834.png)]

CSS后代选择器

后代选择器（descendant selector）又称为包含选择器。使用符合空格

后代选择器可以选择作为某元素后代的元素。

举例来说，如果您希望只对 ul 元素中的 li元素应用样式，而不对ol元素中的li元素应用样式，可以这样写：

作业

制作如下艺术字效果

代码

<!DOCTYPE html>
<html>
最低0.47元/天 解锁文章
抹泪的知更鸟
关注
专栏目录
css3阴影属性
Emma946的博客
03-16 3458
CSS3阴影 CSS3 是 CSS 技术的升级版本，CSS3 语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂， 所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、 背景和边框 、文字特效 、多栏布局等。 CSS3的优点： CSS3 将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也...
css3基本属性
weixin_34122604的博客
03-26 170
一、css属性：1、层叠性：当出现相同的选择器时，属性冲突的时候，后面的属性会把前面的属性 覆盖掉。 2、继承：当存在父子关系的时候,子元素会继承父元素的部分属性 注意： a标签不会继承颜色；h标签不继承字体大小 3、优先级：当有多个选择器作用在同个元素上时，到底谁有效果？ 优先级顺序：继承性 < 通配符 * < 标签选择器 < 类选择器 < id选...
css3第一天(上)
u014782507的专栏
11-03 212
CSS3私有前缀//正常的写法、都认识 border:1px solid #ccc; border-radius:10px; //分别只有chrome、火狐、IE认识 -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px;新的css属性，浏览器实现，实现过程
CSS3：说说CSS上的第一个变量currentColor,及扯扯inherit
CRPER
10-10 3848
currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解；兼容性[IE9+ 及主流的FF,chrome ]。但是IE10及edge有一些BUG（用于渐变的时候会不生效）
CSS入门第一篇之基础属性
m0_49028830的博客
07-14 209
typora-copy-images-to: media CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML，这其实是个非常单纯的家伙， 他只关注内容的语义， 比如 表明这是一个大标题，用 表明这是一个段落，用 表明这儿有一个图片， 用表示此处有链接。 很早的时候，世界上的网站虽然很多，但是他们都有一个共同的特点： 丑。 这个是一个外国比较早的购物网站 有些人就.
css3 :first-child、:nth-child(1)选择第一个元素不起作用的解决方案
热门推荐
gzyzwx的博客
10-25 2万+
当我写一段页面结构如下（以微信小程序为例，传统网页div结构是一样的道理） &lt;view class='seller-info-container'&gt; &lt;view class='seller-avatar-content'&gt; &lt;image&gt;&lt;/image&gt; &lt;/view&gt; &lt;view clas...
html5+css3 一个表白网页
05-19
4. **动画与过渡**：CSS3的transition和animation属性可以实现平滑的过渡效果和复杂的动画，增强用户交互体验。 5. **响应式设计**：媒体查询（Media Queries）使网页可以根据设备的特性如屏幕大小、方向等自动调整...
《HTML5+CSS3网站设计基础教程》源代码+补充案例+动手实践
01-11
1. **选择器增强**：CSS3引入了更多的选择器，如类选择器、属性选择器、伪类和伪元素，使得样式应用更加灵活精确。 2. **布局模块**：CSS3的Flexbox和Grid布局系统为复杂的网页布局提供了强大的解决方案，无论屏幕...
html5-css3-modulo-1：Gustavo Guanabara教授HTML5，CSS和JS课程的第一个模块，来自“ Curso emVídeo”
02-11
在本课程"html5-css3-modulo-1"中，著名教育家Gustavo Guanabara引导我们深入了解HTML5、CSS3以及JavaScript的基础知识，这是"Curso em Vídeo"系列课程的一部分。这个模块主要关注网页开发的核心技术，帮助初学者...
CSS复习1 选择器
qq_39644109的博客
07-05 300
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 记得写引号 提示：如果值为若干单...
解决修改 Style Attributes 不起作用的问题
Dream It Possible
10-31 1万+
今天新建一个项目时遇到了一个问题，项目中大部分 Activity theme 需要显示 ActionBar，个别页面根据业务不需要显示。 需求很简单，直接定义 AppTheme 作为 Application 的基础样式，再定义一个子样式 AppTheme.NoTitle，修改为无 ActionBar 即可。 问题代码 AndroidManifest.xml 部分代码： &amp;lt;manifest ...
html[Attributes Style]什么意思
gao_zhennan的博客
08-07 2478
本文介绍了Attributes Style的含义，以及-webkit-locale的作用。
初识 CSS
weixin_45686583的博客
01-13 334
CSS： 给网页穿上美丽的外衣 CSS：层叠样式表。 CSS语法： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS声明总是以分号(;)结束，声明总以大括号({})括起来。 一、标签选择器（一般用到很少） head 中加 style style 中改变标签样式。
Vue中attribute的合并和替换
qq_41557320的博客
04-03 2697
如果component中定义了一个attribute，例如： <template> <div color='red'>我的最终颜色是蓝色</div> </template> 如果在引用了这个‘子组件’的‘父页面’中定义了一个同样的attribute，例如： <div> <my-component color='blue'&gt...
style attribute 'attr/progressDrawable ' not find
weixin_33720452的博客
10-22 201
Android Studio 升级到3.2.1版本，今天自定义ProgressBar的style的时候，我按照往常的方式编写代码，但是始终编译不过。下图是错误日志 Android resource linking failed Output: D:\workspaceAS\ScanAll\app\build\intermediates\incremental\mergeDebugResource...
Attributes属Style属性
Microsoft.Net，刘少盟
09-22 8739
Attributes属性     因可以任意指定属性，故对于控件来说，有些指定的属性是不合法的，那么这种属性就是无效的。如：假设当前操作的控件为HtmlImage，名为 image1，假设通过Attribute给其指定一个Text属性，属性值为“你好”。因为HtmlImage
css选择第一个子元素ul,CSS3的first-child选择器实战攻略
weixin_42560991的博客
08-03 5249
CSS 中的 :first-child Selector 可以选择到特定元素的第一组物件(同一个 parent)HTMLXML/HTML Code复制内容到剪贴板123123CSSCSS Code复制内容到剪贴板//只套用编号1的lili:first-child{color:green;}first-child和:first-of-child的区别假如我们有这样的一段HTML代码：XML...
Android资源与属性备忘单
liuye066的专栏
03-24 350
本文转载自：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0324/7720.html 几天前我偶然发现了我Android开发早期时制作的一份学习备忘单，是为理解如何处理Android资源和主题属性的语法而整理的。 令人意外的是，我发现它对现在的我非常有用，因此决定整理成更适合博客的形式并分享给大家。 知
CSS3视觉指南第6版：2013高清英版
《CSS 3视觉快速指南（第六版）》是由Jason Cranford Teague所著，由Peachpit Press出版的一本权威指南。这本书在2013年发行，是针对CSS3（Cascading Style Sheets Level 3）设计者和开发者的重要参考资料。CSS3是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

抹泪的知更鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值