当前位置：首页 > news >正文

CSS基础学习第一天

news 2025/8/26 6:34:53

前言：
        1.HTML的局限性
        ----它只关注内容的语义，可以做简单的样式，但较为繁琐
        2.CSS---层叠样式表
        ----一种标记语言，用于设置HTML页面中的文本内容，图片的外形以及版面的布局和外观显示样式。

1. CSS语法规范

---选择器+一条或多条声明

eg：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>---CSS---</title><style>p {color: red;/* font - 字体   size - 大小  px - 像素 */font-size: 24px;}</style>
</head><body><p>有点意思</p>
</body></html>

2. CSS选择器

选择器：用于选择标签。

选择器分为基础选择器和复合选择器。

基础选择器：是由单个选择器组成的。包括标签选择器、类选择器、id选择器和通配符选择器。

1）标签选择器

---是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

---语法：
标签名 {
属性1: 属性值1
属性2: 属性值2
...
}

作用：可以把某一类标签全部选择出来。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式，只能选择全部的当前标签。

2）类选择器

---可以差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器。

语法：
.类名{
属性1: 属性值1;
...
}
// 类名前必须加“.”，类名自己定义，不要使用纯数字、中文等命名，尽量使用英文字母来表示，长单词和词组可以用中横线，命名规范见Web前端开发规范手册。

需要用class属性，示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>---CSS---</title><style>.blue {color: blue;}</style>
</head><body><ul><li class="blue">工藤新一</li><li>毛利兰</li><li>松田阵平</li><li>服部平次</li><li>黑羽快斗</li></ul>
</body></html>

多类名，示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>---CSS---</title><style>.blue {color: blue;}.font24 {font-size: 24px;}</style>
</head><body><div class="blue font24">工藤新一</div>
</body></html>

3）id选择器

与类选择器区别：id只能使用一次，类可以多次使用

---以“#”来定义。

语法：
#id {
属性1: 属性值1;
...
}
// id自己命名，样式#定义，结构id调用，只能调用一次

代码示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>---CSS---</title><style>.blue {color: blue;}.font24 {font-size: 24px;}#blue {color: blue;}</style>
</head><body><!-- <div class="blue font24">工藤新一</div> --><div id="blue">毛利兰</div>
</body></html>

4）通配符选择器

---使用“*”定义，表示选取页面中所有元素（标签）。

语法：
* {
属性1：属性值1；
...
}

注意：通配符选择器不需要调用，自动就给所有的元素使用样式

以下是清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}

5）总结：

3. CSS字体属性

1)font-faimly 字体系列

h2 { font-family: '微软雅黑'; }
p { font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; }

各种字体之间用英文逗号隔开，如果有空格隔开的多个单词组成的字体加引号。尽量使用系统默认自带字体。

最常见的几个字体：'Microsoft YaHei' 、tahoma'、arial 、'Hiragino Sans GB'

2）font-size 字体大小

如果定义body，那么注意对标题标签是无效的，需要单独指定字体大小。

谷歌浏览器默认字体大小16px。px（像素）是我们网页的最常用的单位。不同浏览器默认显示的字号大小可能不一致。

3）font-weight 字体粗细

.bold {font-weight: 700;}

4）font-style 文字样式

p {font-style: italic;}

5）复合属性

注：不能改顺序，以空格隔开，不需要设置的属性可以省略，但必须报了font-size和font-family属性，否则font属性无效。

body {font: font-style font-weight font-size/line-height font-family;}

eg：

        body {font: italic 700 16px 'Microsoft yahei';}

6）字体属性总结

4.CSS文本属性

---定义文本的外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。

1）文本颜色

eg（开发中常用16进制）:

div {/* color: blue; *//* color: #ff0000; *//* color:rgb(255,0,0); */}

2）对齐文本

---text-align属性用于设置元素内文本内容的水平对齐方式

3）装饰文本

---text-decoration属性可以给文本添加下划线、删除线、上划线。

4）文本缩进

---text-indent属性将指定文本的第一行缩进，可以给负值。

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果没有设置大小，则按照父元素的1个文字大小。

5）行间距

---line-height属性

行间距由上间距、文本高度和下间距组成。

6）文本属性总结

5.CSS三种引入方式

行内样式表：<标签 style="属性:属性值;"></标签>

内部样式表：选择器{属性:属性值;属性:属性值;}

外部样式表：在HTML页面中，使用<link>标签引入文件

<link rel="stylesheet" href="css文件路径">

6.综合案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>body {font: 16px/28px 'Microsoft YaHei';}h1 {font-weight: 400;text-align: center;}.gray {text-align: center;color: #888888;font-size: 12px;}a {text-decoration: none;}.search {color: #666;width: 170px;}.but {font-weight: 700;}p {text-indent: 2em;}.pic {text-align: center;}.last {color: #888888;font-size: 12px;}</style></head><body><h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1><div class="gray">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>　<input type="text" value="请输入查询条件" class="search"> <button class="but">搜索</button></div><hr><p>中国天气网讯今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p><h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日。</h4><p class="pic"><img src="images/pic.jpeg" alt=""></p><p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p><p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p><h4>明日热度再升级！京津冀携手冲击38℃+</h4><p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p><p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p><p class="last">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body></html>