一、CSS 概述

1.概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

2.CSS选择器

1、标签选择器

2、类选择器

3、 ID选择器

3.CSS复合选择器

1、后代选择器

● 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明

● 外层的标签写在前面，内层的标签写在后面，之间用空格分隔

● 标签嵌套时，内层的标签成为外层标签的后代

2、交集选择器

● 由两个选择器直接连接构成，选中二者各自元素范围的交集

● 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

● 选择器之间不能有空格，必须连续书写

3、并集选择器

● 多个选择器通过逗号连接而成

● 利用并集选择器同时声明风格相同样式

二、CSS美化网页

1.<span>标签

2.字体样式

● Font-family：设置字体类型

● Font-size：设置字体大小

● Font-weight：设置字体粗细

3.文本属性

● Color：设置文本颜色

● Text-align：设置元素水平对齐方式

● Text-indent：设置首行文本的缩进

● Line-height：设置文本的行高

● Text-decoration：设置文本的装饰

4.超链接样式

实际网页开发中通常只设置两种状态，一种是a{ }—包括链接的各个状态，一是a:hover { }---鼠标移到对象上的样式

5.网页背景

● Background-color：背景颜色

● Background-image：背景图像

● Background-repeat：背景重复方式

● Background-position：背景定位。---属性值可以为数值，可以为百分比，也可以为关键词；第一个为水平方向，第二个为垂直方向。

● Background：背景样式简写

Background：背景颜色背景图片背景定位背景是否重复显示；

例：background:#C00 url(image/arrow-down.gif) 205px 10px no-repeat;

6.列表样式

● List-style-type：none     无标记符号

● List-style-type：disc        实心圆

● List-style-type：circle        空心圆

● List-style-type：square    实心正方形

● List-style-type：decimal    数字

三、盒子模型

CSS 盒子模型，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

 <style>.div1{/* 盒子模型；width.height. */height: 200px;width: 200px;background-color: aquamarine;padding-top: 50px;margin-top: 100px;border: 10px solid chocolate;/* 设置盒子模型的尺寸计算方式 */box-sizing: border-box;}.div2{/* 盒子模型；width.height. */height: 200px;width: 200px;background-color: rgb(182, 127, 255);}</style>

1. 边框border

border-width：边框粗细

border-style：边框样式 dashed：虚线；solid：实线；

border-color：边框颜色

border：边框设置连写

border：边框粗细边框样式边框颜色或者

border：边框颜色边框粗细边框样式

border:#f00 1px solid;
border:#f00 1px solid;

2.外边距margin

margin是设置对象外边距外延边距离。

（1）margin说明

margin的值有三种情况，可以为正整数和负整数并加单位如PX像素；可以为auto自动属性(margin-left:auto 自动)；可以为百分比（%）值。

margin-left：对象左边外延边距

margin-right：对象右边外延边距

margin-top：对象上边外延边距

margin-bottom：对象下边外延边距

（2）外边距margin缩写

A、只有上下情况缩写

原始：margin-top:5px; margin-bottom:6px

缩写简写为：margin:5px 0 6px 0或margin:5px auto 6px auto

B、只有左右情况缩写

原始：margin-left:5px; margin-right:6px

缩写简写为：margin:0 6px 0 5px或margin:auto 6px auto 5px

C、四边相同值缩写

原始：margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px

缩写：margin:5px;

D、四边不同值缩写：上右左下

原始：margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px

缩写：margin:5px 8px 6px 7px;

E、四边其中上下值和左右值各相同缩写

原始：margin-top:5px;margin-bottom:5px;

margin-left:7px; margin-right:7px

缩写：margin:5px 7px;

F、设置布局局中

margin:0 auto 设置对象上下间距为0，左右自动。

可拆分： margin:0 auto 0 auto；

还可拆分为：margin-left:auto;margin-right:auto;

margin-top:0;margin-bottom:0;

3.内边距padding

A、四边相同padding简写

如果padding四边设置值相同，假如为5px， CSS简写为：padding:5px;

B、四边不同padding简写

Padding:40px 30px 50px 20px;

注意每个数值后一个空格间隔隔开

解释分别意思

第一个40px代表“上”padding-top:40px

第二个30px代表“右”padding-right:30px;

第三个50px代表“下”padding-bottom:50px;

第四个20px代表“左”padding-left:20px;

 <style>div{height: 200px;width: 200px;background-color: aquamarine;/* 边框线的样式 */border-style: dotted;/* 边框线的宽度 */border-width: Spx;/* 边框线的颜色 */border-color: beige;/* css3的新增属性，半径 */border-radius: 55px;}table{border-collapse: collapse;border-spacing: 0ch;border-left: 1px solid pink;border-top: 1px solid pink;/* border: 1px bisque; *//* border-collapse: unset; */}table tr{border-bottom: 1px pink;}table tr td{border-right: 1px pink;}</style>

四、display属性

1、控制元素的显示和隐藏

2、块级元素与行级元素的转变

block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline 行内元素/内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

none 设置元素不会被显示

inline-block：行内块元素 css2.1新增的特性。

既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

五、浮动

Float属性：
属性值	说明
Left	元素向左浮动
Right	元素向右浮动
None	默认值，元素不浮动

1.假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；

2.如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

3.如何嵌入？（样式如何显示html元素）

4.样式通常存储在样式表中（先定义样式表），再把样式表添加到html元素中

1.定义CSS样式的方式：

行内样式（内联样式）

·行内样式仅针对当前标签生效，如果当前的样式不需要复用，可以用行内样式

·优先级高（优先级比内页样式的优先级高，如果同时存在，先显示行内样式）

<!-- 内页样式  style是标签-->
<style>/* 跟据标签前来命名 *//* 选择器selector *//* 标签选择器，可以让页面上所有的p 标签都对应所有的*/p {background-color: bisque;}span {background-color: aqua;}/* 声明一个样式，并起个名字.bg */.bg {background-color: blueviolet;}/* id选择器   理解*/#spring {background-color: aquamarine;}</style>
<body><p>哈哈哈哈</p><p style="background-color: red;">啦啦啦啦啦</p><p>嘿嘿嘿</p><div class="bg">好好好</div><!-- 起名字.bg,其他不用， class类 --><span>kkkk</span><div id="spring">hhhhhh</div>
</body>

内页样式（嵌入样式）

·声明一个样式：在head标签中style中声明

给样式起名：

A：标签选择器（根据标签命名）

B：类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

C：id选择器（id：在当前页面的唯一标识，不能重复）

思考题：标签选择器和类选择器哪个优先级高？

声明样式的时候需要用一个英文的“.”，选择样式通过class属性，class属性里不写“.”

声明样式需要一个“#”，对应的元素的id要匹配

外部样式（推荐）

 <!-- 外部样式 推荐 --><link rel="stylesheet" href="my.css">
</head>
<body><p class="bg">好好好</p>
</body>

2.CSS选择器

标签选择器

类选择器：一个标签元素是可以选择多个样式，样式名中间用空格隔开

Id选择器：ID 选择器允许以一种独立于文档元素的方式来指定样式。

选中页面上所有的标签（div,p)

选中紧跟着div的p（div+p）

选中页面上所有带有type属性的标签（[type]）

选中页面上所有带有type=text属性的标签（[type=name]）

选中页面上type属性包含某个单词的所有元素（[type~=t]）

选中div里面的p（无论嵌套多少层，都可以找到）（div p）

选中div里面的直接子标签（div>p）

伪类选择器（link，hover，active，visited）

选中第几个对应的元素（nth:child()）

选中所有被选中的元素（:checked）

  /* 默认选择器 a .a 都可以 */a:link{color: brown;}/* 鼠标悬停 */a:hover{color: aqua;}/* 元素被激活 */a:active{color: green;}/* 点过的链接 */a:visited{color: bisque;}

3.CSS层叠样式表

层叠性：如果样式冲突，遵循就近原则，哪个样式离结构近就执行哪个样式；如果样式不冲突，就不层叠，直接用

继承性：子标签会继承父标签的某些样式，（文本的颜色、字号、背景颜色等）

权重（优先级）：
(1) 继承的样式权重为最低0

(2) 行内样式权重最高100 E

(3) 如果权重相同，就近原则

(4) ！important无限大

优先级：类>标签>id

（1）继承的权重最低

（2）行内样式的权重最高

（3）如果权重相同，就近原则

（4）！Important改变权重（无限大）

4.CSS常用的单位

px 像素（绝对单位）一个像素代表一个点。

em （相对单位）会参考它的父级元素，设计字体时用的较多。父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。

rem （相对单位）由页面决定。当我们改变了浏览器的字号设置时，页面的字号也会随之发生变化。应用在老人版电子设备。

% 百分比（相对单位）相对于父级元素的比例。

5.css选择器：

1、标签选择器、一个标签样式名中间用空格隔开

2、类选择器：

3、id选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

4、div,p；选中页面上所有的div和p元素

5、div p:选中div黑面的D.无论嵌套多少层，都可以找到

6、div>p:选中div里面的直接字标签p

7、div+p:选中紧跟着div的p

8、[type]：选中页面上所有带有type属性的标签

9、type=text]：选中页面上所有带有type=text属性的标签

10、[type =t]：选中页面上type属性包含单词的所有元素

11、伪类选择器：：link :hover·active:visited

12、nth-childO:选中第几个对应的元素

13、:checked:选中所有被选中的元素

六、实例

1.html：

<body><!-- layout布局 --><div class="rg_layout"><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="#" method="post"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td></tr><tr><td class="td_left"><label for="tel">手机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode" >验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img id="img_check" src="../img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td></tr></table></form></div></div><div class="rg_right"><p>已有账号<a href="#">立即登录</a></p></div></div></body>

2.css

* {margin: 0px;padding: 0px;box-sizing: border-box;
}/* 设置背景图片 */
body {background: url("../img/register_bg.png") no-repeat center;
}/* 设置layout */
.rg_layout {width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;/*让div水平居中*/margin: auto;
}/* 设置左组件 */
.rg_left {float: left;margin: 15px;
}/* 设置左组件第一个元素 */
.rg_left>p:first-child {color: #FFD026;font-size: 20px;
}/* 设置左组件最后一个元素 */
.rg_left>p:last-child {color: #A6A6A6;font-size: 20px;
}.rg_center {float: left;
}.rg_right {float: right;margin: 15px;
}.rg_right>p:first-child {font-size: 15px;
}.rg_right>p a {color: red;
}.td_left {width: 100px;text-align: right;height: 45px;
}.td_right {padding-left: 50px;
} #username,
#password,
#email,
#name,
#tel,
#birthday,
#checkcode {width: 251px;height: 32px;border: 1px solid #A6A6A6;/*设置边框圆角*/border-radius: 5px;padding-left: 10px;
}#checkcode {width: 110px;
} #img_check {height: 32px;vertical-align: middle;
}#btn_sub {width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;
}

3.效果

七、心得体会

今天还是很有收获的，对浮动和盒子模型掌握不是很好，上课听懂了，上手总是错。累累累！！！

2022-07-10 第八小组张明敏学习笔记相关推荐

2022-07-09 第八组张明敏学习笔记
目录一.HTML 1.概述 2.浏览器(理解) 3.解释基本标签: 文本格式化标签: 超级链接:(理解) 区块/空白: 无序列表: 有序列表: 自定义列表: 表格:一组标签框架:ifream 转 ...
经典神经网络论文超详细解读（八）——ResNeXt学习笔记（翻译＋精读＋代码复现）
前言今天我们一起来学习何恺明大神的又一经典之作: ResNeXt(<Aggregated Residual Transformations for Deep Neural Networks&g ...
2022.07.10 第九小组高小涵学习笔记
CSS CSS---层叠样式表,相当于整个网页的美化 1.插入样式表的方法有三种: 外部样式表(推荐):link引入外部样式内部样式表: <style> 标签在文档头部定义内部样式表内 ...
0.1.3 合宙CORE-ESP32-C3开发板用arduino点亮ST7735 1.8寸TFT屏【已更新失效链接2022.07.10】
9.9的ESP32开发板想用arduino开发,无奈都是用luatos玩,于是折腾了下目的用arduino驱动合宙ESP32-C3开发板点亮S7735TFT屏材料 CORE-ESP32-C3开发 ...
黑马程序员Java零基础视频教程(2022最新Java）B站视频学习笔记-Day10-字符串
1.API和API帮助文档 API:应用程序接口. 简单理解:API就是别人已经写好的东西,我们不需要自己编写,直接使用即可. JavaAPI:指的就是JDK中提供的各种功能的Java类.这些类将底层 ...
C/C++基础查漏补缺（八）----------寒假学习笔记（八）
寒假C语言基础查漏补缺笔记(八) 本系列文章是基于自身的编程基础而编写的,其内容并非适用于所有人,请海涵~ 不过内容应该包括了所有的考点.用法,初学C/C++的大学生或者noip入门级选手可以以此作为 ...
黑马程序员Java零基础视频教程(2022最新Java）B站视频学习笔记-Day14-面向对象进阶02
1.权限修饰符和代码块 1.1 权限修饰符权限修饰符:是用来控制一个成员能够被访问的范围的. 可以修饰:成员变量.方法.构造方法.内部类. 巧计举例: private--------私有的----- ...
2022-07-12 第七小组 wly 学习笔记
今日重点: 目录一.四种循环二.JS内置函数三.获取元素四.事件五.随堂练习一.四种循环 1.for循环 //for语句格式(循环语句) for(初始化语句;判断条件语 ...
目标检测算法实现（八）——YOLOV5学习笔记
非常感谢江大白大佬的研究与分享附链接深入浅出Yolo系列之Yolov5核心基础知识完整讲解目录 1.网络结构图+v5性能对比 2.v5的改进和优势 2.1 输入端 2.1.1 Mosaic数据增 ...

2022-07-10 第八小组张明敏学习笔记

目录

一、CSS 概述

1.概述

2.CSS选择器

3.CSS复合选择器

1、后代选择器

2、交集选择器

3、并集选择器

二、CSS美化网页

1.<span>标签

2.字体样式

3.文本属性

4.超链接样式

5.网页背景

6.列表样式

三、盒子模型

1. 边框border

2.外边距margin

3.内边距padding

四、display属性

1、控制元素的显示和隐藏

2、块级元素与行级元素的转变

五、浮动

1.定义CSS样式的方式：

思考题：标签选择器和类选择器哪个优先级高？

2.CSS选择器

伪类选择器（link，hover，active，visited）

3.CSS层叠样式表

4.CSS常用的单位

5.css选择器：

六、实例

1.html：

2.css

3.效果

七、心得体会

2022-07-10 第八小组张明敏学习笔记相关推荐

最新文章

热门文章

2022-07-10 第八小组 张明敏 学习笔记

目录

一、CSS 概述

1.概述

2.CSS选择器

3.CSS复合选择器

1、后代选择器

2、交集选择器

3、并集选择器

二、CSS美化网页

1.<span>标签

2.字体样式

3.文本属性

4.超链接样式

5.网页背景

6.列表样式

三、盒子模型

1. 边框border

2.外边距margin

3.内边距padding

四、display属性

1、控制元素的显示和隐藏

2、块级元素与行级元素的转变

五、浮动

1.定义CSS样式的方式：

思考题：标签选择器和类选择器哪个优先级高？

2.CSS选择器

伪类选择器（link，hover，active，visited）

3.CSS层叠样式表

4.CSS常用的单位

5.css选择器：

六、实例

1.html：

2.css

3.效果

七、心得体会

2022-07-10 第八小组 张明敏 学习笔记相关推荐

最新文章

热门文章

2022-07-10 第八小组张明敏学习笔记

2022-07-10 第八小组张明敏学习笔记相关推荐