Dreamweaver css基础知识

最新推荐文章于 2024-01-13 18:21:09 发布

weixin_57765775

最新推荐文章于 2024-01-13 18:21:09 发布

阅读量298

点赞数

文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/weixin_57765775/article/details/119989188

版权

本文介绍了Dreamweaver中CSS的基础知识，包括解析CSS规则、基础语法、为文档添加样式的方法，以及用户代理样式表和浏览器用户自定义样式。通过示例详细讲解了如何设置文本颜色、字体大小，以及CSS规则的结构和应用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Dreamweaver

作者：苏恩祺

撰写时间：2021/8/28

1. 解析CSS规则

下面我们举例说明：将段落标签的文本内容设置为红色

HTML代码：

<p id="txtp">this is a paragraph</p>

CSS代码：

p{
color: red;
}

浏览器中显示效果如图4.3.2.1-1所示

图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>

2. CSS基础语法

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

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

图4.3.2.2-1

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

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

1、多个声明包含在一条规则里面

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

2、多个选择符结合在一起

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

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

CSS规则：

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

3.多条规则应用给一个选择符

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

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

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

3.为文档添加样式(程序)

在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>