CSS基础(1)_CSS基本语法、注释、常用选择器

CSS注释:/* ... */

CSS基本语法

选择器声明块

选择器：通过选择器可以选中页面中的指定元素。(比如p的作用就是选中页面中所有的p元素)
声明块：通过声明块来指定要为元素设置的样式。

声明块特点：1、声明块由一个一个的声明组成;
2、声明是一个名值对结构(一个样式名对应一个样式值，名和值之间以:连接，以;结尾)

选择器

元素选择器

作用：根据标签名来选中指定的元素。
语法：标签名{}
例子：p{} h1{} div{}

任务一：将《回乡偶书.二首》除标题作者外所有段落字体设置为绿色。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>选择器</title><head><link rel="stylesheet" href="selector.css"></head>
</head>
<body>
<h2>《回乡偶书.二首》</h2>
<h3>贺知章</h3>
<p>其一</p>
<p>少小离家老大回，乡音无改鬓毛衰。</p>
<p>儿童相见不相识，笑问客从何处来。</p>
<p>其二</p>
<p>离别家乡岁月多，近来人事半消磨。</p>
<p>惟有门前镜湖水，春风不改旧时波。</p>
</body>
</html><!--selector.css文件下设置样式-->
p{color:green;
}

id选择器(id属性值不能重复)

作用：根据元素的id属性值选中一个元素。
语法：#id属性值{}
例子：#box{} #red{}

任务二：将"儿童相见不相识，笑问客从何处来。"设置为红色。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>选择器</title><head><link rel="stylesheet" href="selector.css"></head>
</head>
<body>
<h2>《回乡偶书.二首》</h2>
<h3>贺知章</h3>
<p>其一</p>
<p>少小离家老大回，乡音无改鬓毛衰。</p>
<p id="red">儿童相见不相识，笑问客从何处来。</p>
<p>其二</p>
<p>离别家乡岁月多，近来人事半消磨。</p>
<p>惟有门前镜湖水，春风不改旧时波。</p>
</body>
</html><!--selector.css文件下设置样式-->
p{color:green;
}
#red{color: red;
}

类(class)选择器(class属性值可以重复)

作用：根据元素的class属性值选中一组元素。
语法：.class属性值
例子：.blue{} .green{}

class是一个标签的属性，它和id类似，不同的是class可以重复使用，id是唯一不重复的。
特点：1、可以通过class属性来为元素分组。
2、可以同时为一个元素指定多个class属性。

任务三：将"离别家乡岁月多，近来人事半消磨。" 和 "惟有门前镜湖水，春风不改旧时波。"和 "贺知章" 设置为蓝色。将 "贺知章" 像素调整为20px 。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>选择器</title><head><link rel="stylesheet" href="selector.css"></head>
</head>
<body>
<h2>《回乡偶书.二首》</h2>
<!-- 可以指定多个class属性值,用空格隔开即可  -->
<h3 class="blue abc">贺知章</h3>
<p>其一</p>
<p>少小离家老大回，乡音无改鬓毛衰。</p>
<p id="red">儿童相见不相识，笑问客从何处来。</p>
<p>其二</p>
<p class="blue">离别家乡岁月多，近来人事半消磨。</p>
<p class="blue">惟有门前镜湖水，春风不改旧时波。</p>
</body>
</html><!--selector.css文件下设置样式-->
p{color:green;
}
#red{color: red;
}
.blue{color: blue;
}
.abc{font-size: 20px;
}

通配选择器

作用：选中页面中的所有元素
语法：*{}

任务四：将所有字体设置为红色。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>选择器</title><head><link rel="stylesheet" href="selector.css"></head>
</head>
<body>
<h2>《回乡偶书.二首》</h2>
<h3>贺知章</h3>
<p>其一</p>
<p>少小离家老大回，乡音无改鬓毛衰。</p>
<p>儿童相见不相识，笑问客从何处来。</p>
<p>其二</p>
<p>离别家乡岁月多，近来人事半消磨。</p>
<p>惟有门前镜湖水，春风不改旧时波。</p>
</body>
</html><!--selector.css文件下设置样式-->
*{color: red;
}

CSS基础(1)_CSS基本语法、注释、常用选择器相关推荐

html选择器_css的9个常用选择器
1.类选择器(通过类名进行选择) <!DOCTYPE html> <html> <head><title></title> </hea ...
【前端基础】12.CSS 基础知识学习——基本语法结构
视频目录一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则二,字体样式 1.fon ...
html+css基础笔记_CSS样式_part1_2
1.CSS背景样式属性: background-color:背景色 background-image:背景图 url背景地址,默认水平垂直铺满背景图写法:background-image: url ...
1.2 CSS 基础
CSS 基础介绍 Introduction to Basic CSS CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. 注意,CSS 的选择器区分 ...
【CSS基础语法】CSS基础语法知识学习笔记汇总
CSS基础语法前言一.样式定义方式 1.html 2.css 二.选择器 1.html 2.css 三.颜色 1.html 2.css 四.文本 1.html 2.css 五.字体 1.html ...
HTML常用标签+CSS基础
目录一.HTML常用标签 1.1文件标签 1.2.文本标签 1.3.图片标签 1.4.列表标签 1.5超链接标签 1.6表格标签 1.7表单标签二.CSS 2.1css语法 2.2选择器一.HT ...
前端基础：html基础(css基础和JavaScript基础)/01/B/S网络结构，html文件结构，html标签格式，lt;bodygt;中的一些常用标记
前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...
java字节型的关键字_DAY06-07 Java的基础语法-注释、标识符、关键字、数据类型
Java的基础语法注释注释不会被执行,是给人看的书写注释是一个非常好的习惯. 注释类型: (1)单行注释:// 注释内容 (2)多行注释:/ * - 注释内容-. * / (3)文档注释:/* ...
CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法序号 ...

CSS基础(1)_CSS基本语法、注释、常用选择器

CSS基本语法

选择器

CSS基础(1)_CSS基本语法、注释、常用选择器相关推荐

最新文章

热门文章