收藏
批改状态：合格
老师批语：写得很认真, 望坚持下去
本次课程主要学习了css的定义和css的使用方法以及css选择器的使用
一、HTML元素的定义
1.元素是什么？
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
2.元素按显示方式分为哪几种？
元素按显示方式分为块级元素和行内元素两种。
块级元素例如：<div>、<p>、<h>、<table>等，遵循最大化原则，块级元素独占一行，两步不允许有元素出现，自动充满父级的内容区，亦会被块级元素内的内容扩充撑开，若其内无内容且块级元素又没有设置高宽，则浏览器中无法显示感知。
行内元素例如:<input>、<span>、<em>、<strong>,它出现在一行文本元素中，遵循最小化原则，行高和宽度由其所在行决定，不允许设置。
元素的显示方式可以用display来改变。
二、css定义
1.什么是css
css是层叠样式表（Cascading Style Sheets）
2.css的作用
css用来设置html元素的布局与显示。
三、css选择器
1.什么是css选择器？
css选择器指明了样式将要作用于哪个对象。它的样式生命规则是：选择器{属性:属性值;}。css选择分为四大类，如下：
a.简单选择器
规则是：选择器+样式声明。根据元素的标签名称和属性来选择元素, 是最朴素,最直观的方式
常用的简单选择器又分为5种:
元素选择器: div {...};
属性选择器: tag[property...];
类/class选择器: .active {...};
ID选择器: #main {...};
群组选择器: p, .active, div {...};
通配符选择器: *, 表示全部元素, 通常用在上下文选择器。
选择器是有优先级之分的，当元素选择器, 类选择器, ID选择器同级共存时:tag < class < id。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css简单选择器</title>
<style>
/* 元素选择器 */
div{
color: blue;
}
/* 属性选择器 */
p[class="red"]{
color: red;
}
/* 类选择器 */
.red{
color: red;
}
/* id选择器 */
#red{
color: coral;
}
/* 群组选择器 */
p,div,.red{
color: black;
}
/* 通配符选择器 */
body * {
color: brown;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p class="red">属性选择器</p>
<h1 id="red">id选择器</h1>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄：
b.上下文选择器
所谓上下文, 是指元素之间的结构关系,如层级,包含等,主要有四个选择器 : * 后代选择器: `空格`, 如 `div p`, `body *` * ;
父子选择器: `>`, 如 `div + h2` * ;
同级相邻选择器: `+`, 如 `li.red + li` * ;
同级所有选择器: `~`, 如 `li.red ~ li`.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>上下文选择器</title>
<style>
/* 后代选择器 */
section h2{
color: brown;
}
/* 父子选择器 */
section > h2{
color: burlywood;
}
/* 同级相邻选择器 */
#item + *{
color: cyan;
}
/* 同级所有选择器 */
#item ~ *{
color: darkgray;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">例子</h2>
<h2>同级相邻</h2>
<h2>同级所有</h2>
</div>
<h2>子级1</h2>
<h2>子级1</h2>
</section>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄：
c.伪类选择器
伪类, 顾名思义, 仍然是"class"级别的选择器, 优先级小于id,大于标签* 为了与传统的类选择器相区别, 伪类采用冒号`:`, 而不是点`.`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>结构伪类选择器</title>
<style>
/* 结构伪类选择器 */
.item:first-child{ /*选择父元素div的第一个子元素*/
color: darkgray;
}
/* 非限定类型 */
div > :nth-child(2){ /*选择页面中所有div下的第二个子元素*/
color: darkmagenta;
}
div:first-child >:nth-child(2){ /*选择第一个div下的第二个子元素*/
color: darkviolet;
}
/* 非限定到限定的转换规则, 将`child` 用 `of-type`替换即可 */
/* 限定类型 */
div:first-of-type >:nth-of-type(2){
color: darkviolet;
}
/* 表单伪类 */
/* * `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
: `:read-only`: 选择只读表单元素 */
input:enabled {
background-color: blanchedalmond;
}
/*选择禁用元素*/
input:disabled {
background-color: lightgray;
}
/*选择所有必选项*/
input:required {
background-color: yellow;
}
</style>
</head>
<body>
<div class="item">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div class="item">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<form action="">
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required placeholder="example@email.com">
</p>
<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<label for="save" >保存密码:</label>
<input type="checkbox" id="save" name="save" checked readonly>
</p>
<p>
<input type="hidden" name="login_time" value="登陆时间戳">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
</p>
</form>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手抄：
四、总结
本次课程主要学习对象是css即层叠样式表，它的作用对象时html，设置HTML的布局和显示，如果将HTML比作一张画布，那么css就是画笔，拿起画笔可以在这块HTML画布上天马行空。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
