CSS-1.1-CSS概述

最新推荐文章于 2024-03-25 20:16:44 发布
最新推荐文章于 2024-03-25 20:16:44 发布
阅读量267 收藏 1
点赞数 1
分类专栏： CSS WEB前端 文章标签： CSS概述 CSS常见属性 CSS语法 CSS注释
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/100638730
版权

CSS-1.1-CSS概述

一：前言

  • 互联网前端分三层
    • HTML
      • 超文本标记语言
        • 从语义的角度描述页面结构
    • CSS
      • 层叠样式表
        • 从审美的角度负责页面样式
    • JS
      • javaScript
        • 从交互的角度描述页面行为

二：CSS概述

  • HTML只负责文档的结构和内容，表现形式交给CSS
    • 若在一百个页面上实现同一个样式，
      • HTML需要写一百次
      • 而CSS仅需写一遍
  • CSS：
    • Cascading style sheet
    • 层叠样式表
  • CSS的作用：
    • 给HTML页面标签添加各种样式，定义网页的显示效果
    • CSS将网页内容和显示样式进行分离，提高了显示功能

HTML缺陷
1.不能够适应多种缺陷
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大

CSS的优点
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.提高开发效率（一人负责写HTML，一人负责写CSS）

CSS两个知识部分
1.选择器，怎么选
2.属性，样式是什么

三：CSS重要知识点

  • 盒子模型
  • 浮动
  • 定位

四：CSS语法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌入式</title>
	<style type="text/css">
		/* 通过嵌入式引入 */
		div{
			height: 200px;
			width: 200px;
			/* 属性有多个值时用空格相隔开 */
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

1、语法格式

  • 选择器代表页面上的某类元素，选择器后面一定是大括号
  • 属性名与属性值之间用冒号
  • 属性名与属性名之间用分号
  • 属性名和冒号之间最好不要有空格
  • 如果一个属性有多个值的话，用空格将值隔开

2、代码注释

  • /* 代码注释 */
  • 注释要写在<style>标签里面才生效
  • 快捷键
    • CTRL+SHIFT+/

五：CSS常见属性

1、字体颜色

  • color:“red”
  • 属性值
    • 英语单词
    • RGB
    • 十六进制
<body>
    <!-- 字体颜色 -->
    <p style="color: blue">中国</p>
</body>

在这里插入图片描述

2、字号大小

  • font-size:“8px”
    • font：字体
    • size：尺寸
  • 单位是像素
    • 单位必须加
<body>
    <!-- 字号大小 -->
    <p style="font-size: 8px">中国</p>
</body>

在这里插入图片描述

3、背景颜色

  • background-color:“blue”
    • background：背景
    • color：颜色
<body>
    <!-- 背景颜色 -->
    <div style="background-color: blue"></div>
</body>

4、加粗

  • font-weight:bold
    • font:字体
    • weight:重量
    • bold:粗
<body>
    <!-- 字体加粗 -->
    <p style="font-weight:bold">中国</p>
</body>

5、不加粗

  • font-weight:normal
    • font:字体
    • weight:重量
    • normal:正常
<body>
    <!-- 字体不加粗 -->
    <p style="font-weight:normal">中国</p>
</body>

6、斜体

  • font-style:italic
    • italic:斜体
<body>
    <!-- 字体斜体 -->
    <p style="font-style:italic">中国</p>
</body>

7、不斜体

  • font-style:normal
<body>
    <!-- 字体不斜体 -->
    <p style="font-style:normal">中国</p>
</body>

8、下划线

  • text-decoration:underline
    • text:文本
    • decoration:装饰
    • underline:下划线
<body>
    <!-- 字体下划线 -->
    <p style="text-decoration:underline">中国</p>
</body>

9、没有下划线

  • text-decoration:none
<body>
    <!-- 字体没有下划线 -->
    <p style="text-decoration:none">中国</p>
</body>
anh_qwh
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的概述
qq_40208605的博客
04-04 2406
1.1CSS的概述1.1.1CSS是什么 CSS 通常称为CSS样式或层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。 CSS可以是HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。 1.1.2CSS名词解释 CSS (Cascad...
CSS之初识css-1
Jerry_0728的博客
11-17 151
目标： 1，什么是css？ 2，css与html的联系？ 3，css的3种使用形式？ 样式表特征 优先级算法及排序 1，什么是css？ 1，英文名字：Cascading Style Sheets 中文名字：层叠样式表，又叫级联样式表，简称样式表 2，用于HTML文档中元素的样式定义 【作用：】实现了将内容与表现分离，提高代码的可重用性和可维护性 2，css与html之间的关系 html用于构建网页的结构 css用于构建html元素的样式 html是页面的内容组成，css是页面的表现 css的作用
CSS概述
qq_45638271的博客
04-08 807
01_CSS：概述 目标 了解css的基础概念 路径 css是什么 css名词解释 css的书写格式 CSS是什么 CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。 CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接
CSS概述及基本语法[web前端]
m0_58450531的博客
09-07 1103
新浪
CSS 概述
Dailyblue的专栏
03-29 1114
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 文件扩展名为 .css。
CSS--简单概述
罗俊
07-27 2029
前言 内容 概述： 历史 语言特点 丰富的样式定义 易于使用和修改 多页面应用 层叠 页面压缩 总结 end 前言 CSS是Cascading Style Sheets的缩写，汉语意思为层叠样式表，根据其名称我们就可以知道CSS的功能是什么了吧，对！就是规范页面样式的一种脚本语言，现在就让我简单的为大家介绍一下CSS吧! 内容 概述： CSS是一种用来表现HTML...
jai_imageio-1_0_01-doc.zip_doc_jai_imageio-1.1
09-23
1. **stylesheet.css**：这是文档的样式表文件，定义了HTML页面的布局和样式，使文档呈现出清晰、易读的格式。 2. **index-all.html**：此文件是整个文档的索引，包含所有类、接口、枚举和注解的链接，方便用户快速...
HTML-CSS-详解资源
07-25
**1.1 HTML 概述** HTML，即超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言。它允许开发者通过一系列预定义的标签来构建和布局网页内容。HTML 文件包含了描述文档结构和内容的标签...
tytttta#CSS-learning#五CSS盒子模型1
07-25
1.1 CSS盒子模型概述 1.3 CSS 盒子模型边框 1.4 CSS盒子模型外边距 1.5CSS盒子模型的应用
PostCSS技术概述
最新发布
04-22
### PostCSS技术概述 #### 一、PostCSS简介 **1.1 PostCSS的基本概念** - **定义**：PostCSS是一种先进的CSS预处理器，通过插件系统的方式对CSS进行转换和优化，支持最新CSS特性的同时确保了良好的浏览器兼容性。...
Sergey-s-HTML5-CSS3-Quick-Reference.pdf
01-03
#### 三、CSS3概述 - **定义**：CSS3是层叠样式表的最新版本，用于控制Web页面的布局和样式。 - **CSS3新特性**： - 更多的选择器，如属性选择器、伪类等； - 引入了过渡（transitions）和动画（animations）效果...
css概述
2301_78867728的博客
03-25 312
外部样式表是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中.例如<p>、<h1>、<ul>、<ol>、<hr/>等。行级标签：只占自身大小的标签，不会占一行。例如<font>、<b>、<i>、<a>等。id 选择器：通过标签的id属性值选中唯一的一个标签语法： #id属性值 {}类选择器：通过标签的class属性值选中一组标签语法：.class属性值{}标签选择器：通过标签选择器可以选择页面中的所有指定标签语法：标签名 {}
css学习
bcx0827的博客
05-20 738
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 编程工具 记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。 Dreamweaver：它与Flash、Firewor
【CSS01】CSS基础01_简介_语法_id和class选择器
cs_xuhuan的博客
02-27 1017
什么是CSS？ CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 样式解决了一个很大的问题 样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签...
嵌入式文本编辑器_MediumEditor – Web的嵌入式文本编辑工具栏
cune1359的博客
07-03 574
每个人都知道Medium.com及其广受欢迎的博客平台。 他们在设计界重新定义了很多想法，您可以找到很多教程来教您如何克隆他们的设计。 您可能会喜欢的一种工具是基于纯JavaScript的MediumEditor插件 。 它使您可以将自定义内联文本编辑器添加到与Medium博客网站设计相同的任何页面。 因此，您可以使用简单的可视工具栏使读者加粗，斜体，添加链接，标题以及几乎所有其他内容。 ...
0.CSS概述
星辰大海-H的博客
04-28 123
CSS概述 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 CSS规则（rule）是层叠样式表的基本组成单位，它包含一条或多条属性声明。通过选择器匹配并应用到相应的HT
JavaScript-3.5-JavaScript 函数-案例
QWH_PYTHON的博客
10-24 878
JavaScript-3.5-JavaScript 函数-案例案例一：使用函数实现计算机功能二：递归 案例 一：使用函数实现计算机功能 使用 prompt 输入两个数和运算符号，计算两个数的操作结果 使用 switch 判断运算符号，调用函数计算两数结果 <!DOCTYPE html> <html lang="en"> <head> <meta ch...
XHTML+CSS+JS：Web前端开发详解
5. JavaScript概述： - JavaScript是一种解释型的脚本语言，主要用于网页交互和动态效果。 - 基本语法包括变量声明、数据类型、运算符、流程控制等。 - 文档对象模型（DOM）：JavaScript用于操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值