Css基础知识

最新推荐文章于 2023-03-29 16:56:23 发布

xwjix

最新推荐文章于 2023-03-29 16:56:23 发布

阅读量356

点赞数 1

本文链接：https://blog.csdn.net/xwjix/article/details/119884256

版权

CSS层叠样式表:

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。/*-- Cascading [kæˈskeɪdɪŋ] Sheets [ʃiːts]*/

CSS 能够对网页中元素位置的排版进行像素级别精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

工作原理：CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。名称 CSS 中的“层叠（cascading）”表示样式单规则应用于 HTML文档元素的方式。具体地说，CSS 样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由 CSS 根据这个层次结构决定，从而实现级联效果。

CSS代码：

p{
color: red;
}

图4.3.2.1-1

在浏览器中查看代码的方式：在浏览器中点击右键，然后选择检查，即可在浏览器中查看HTML结构和CSS样式。

完整代码：

<!doctype html>
<!--它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，
意思为文档种类为超文本标记性语言或超文本链接标示语言-->
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*内部样式：CSS样式嵌套在页面head元素中的style标签里*/
p{
color:red;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p>this is a paragraph</p>
<img src="images/mycat.jpg" alt="这里是一个猫咪">
</body>
</html>

CSS是一门编程语言，既然是语言那么就一定有它的语法规则。那么接下来我们就来学习CSS的基础语法规则。

CSS规则由两部分组成：选择符和声明两部分组成，其中选择符是指你所要改变样式的元素，声明是指你需要设置的样式部分。声明由两部分组成：属性和属性值。如图4.3.2.2-1所示

图4.3.2.2-1

重要说明：CSS和HTML中的符号都是英文状态下的符号，例如规则中的":"冒号和";"分号。

对于上面的基本结构，我们可以做出以下扩展：

p {
color:red;/*字体颜色样式*/
font-size: 26px;/*字体大小样式*/
}

例如：同时给标题标签h1 h2 h3设置同样的样式属性

<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>

CSS规则：

h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
color: #900; /*字体颜色样式*/
font-size: 20px;/*字体大小样式*/
}

简单来说就是，多条CSS规则去改变一个元素的样式.

h1,h2,h3{ /*选择器之间用,英文状态的逗号隔开*/
color: #900; /*字体颜色样式*/
font-size: 20px;/*字体大小样式*/
}
h1{
text-align: center;/*文本内容居中显示*/
}

对于上面的2条规则，H1标签最后的样式为，字体颜色为红色，字体大小为20像素，文本内容居中显示。

在CSS中为文档添加样式的4个方式：

内联样式
内部样式
链接样式|外部样式（link标签引入外部样式）
@import指令导入外部样式文件

1.使用内联样式：直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。

<div style="width:200px;height:200px;"></div>

2. 使用内部样式：写在<style>标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但也会被内联样式覆盖。

<style type="text/css">
div{
width:200px;/*宽度：200像素*/
height:200px;
}
</style>

3.链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到页面，相应页面就可以使用样式。

<link href="链接表地址" rel="stylesheet" type="text/css"/>

4. @import指令导入外部样式文件：和链接样式类似。引用@import指令在某些浏览器(IE)可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。而是尽量使用链接外部样式表。

<style type="text/css">@import url(地址);</style>
@import url(.../../地址)

完整的代码结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式表的基本使用方法</title>
<link href="./css/indexstyle.css" rel="stylesheet" type="text/css"/>
<!--rel是relationship的英文缩写
stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表-->
<style type="text/css">
@import url(css/indexstyle.css);
</style>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
<h1 style="color:green">this is a head</h1>
<h1></h1>
</body>
</html>

User agent stylesheet用户代理样式表;浏览器默认的样式表

在写HTML+CSS的页面的CSS样式表时，需要进行标签重置，原因在于浏览器都拥有一套自己的默认CSS样式表，不重置的话，会降低页面浏览器的兼容性，导致页面在不同的浏览器内显示的效果不同

xwjix

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css基础知识

CSS层叠样式表:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。/*-- Cascading [kæˈskeɪdɪŋ] Sheets [ʃiːts]*/CSS 能够对网页中元素位置的排版进行像素级别精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。工作原理：CSS是一种定义样式结.
复制链接

扫一扫