HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用
文章目录
1、CSS基础知识
2、css样式
- 内联样式
- 写在head中的style
- 外部引入（使用最多）
2.1、代码：
外部css样式
p{
color: green;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式</title>
<!-- 写在head中的style标签里，
将样式写在style标签中，通过css选择器选择指定的元素
同时给这些元素设置样式，复用
<style type="text/css">
p{
color: goldenrod;
font-size: 20px;
}
</style>
-->
<!-- 将样式写在外部文件中，然后通过link标签一引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="stylecss/style.css">
</head>
<body>
<p>我是style里边的样式设置</p>
<!-- 内联样式:
将样式直接写在style样式中，只在当前有效果。耦合性大 -->
<span style="color: red; font-size: 24px;">我是内联样式</span>
</body>
</html>
2.2 测试结果
3、CSS的语法
3.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css语法</title>
<style type="text/css">
/*
css的注释，必须写在style标签中，或者是css文件中
css的语法：
选择器：声明块
选择器：可以选中页面中的指定元素，将声明块中的样式应用到选择器对应的元素上
声明块：紧跟在选择器后，使用{}括起来，名值对结构，一组一组的名值对称为声明，声明
和声明之前用；隔离
*/
p{
color: goldenrod;
font-size: 20px;
}
</style>
</head>
<body>
<p>我是css样式</p>
</body>
</html>
4、块元素和行内元素
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素</title>
</head>
<body>
<!-- 块元素：
所谓块元素就是独占一行的元素：div h1 p
div这个标签不会给里边的元素设置默认样式，主要对页面进行布局
行内元素：
只占自身大小的元素，不会占一行：span iamge a iframe
块元素进行页面的布局，内联元素进行文本的样式设置。块元素可以包含行内元素。反之不可以
... -->
<div style="background-color: red; width: 100px; height: 50px;">div1</div>
<div style="color: green; ">div2</div>
<hr>
<span>我是块元素</span><span>我是块元素</span><span>我是块元素</span>
</body>
</html>
4.2 测试结果
5、常用的选择器
5.1 代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用选择器</title>
<style type="text/css">
/*
id选择器：通过元素的id属性值 选中唯一的元素
语法：
#id属性值{}
*/
#pid{
color: red;
}
/*
类选择器：通过元素的class属性值选中一组元素
语法：
.class属性值{}
*/
.pid1{
color: green;
}
/*
选择器分组：可以同时选中多个选择器对应的元素
语法：选择器1，选择器2...选择器N{}
*/
.pid1,#pid{
background-color: yellow;
}
/*
通配选择器：可以选中页面中的所有元素
语法：*{}
*/
</style>
</head>
<body>
<p>我要学html</p>
<p id="pid">我要学html</p>
<p class="pid1">我要学html</p>
<p class="pid1">我要学html</p>
<p >我要学html</p>
</body>
</html>
5.2 测试结果
6、父类和子类选择器
6.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元素和子元素</title>
<style type="text/css">
/*
后代元素选择器：
作用：选中指定后代元素
语法：
祖先元素 后代元素{}
*/
div p span{
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<!--
元素之间的关系：
父元素：直接包含子元素
子元素：直接被父元素包含
祖先元素：直接或者间接包含后代元素，父元素也是祖先元素
后代元素：直接或者间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素 -->
<div>
<span>我是div中的span</span>
<p><span>我是div中的p中的span</span></p>
</div>
<span>我是body中的span</span>
</body>
</html>
6.2 测试结果
7、列表
7.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
/*去掉无序列表的符号*/
ul{
list-style: none;
}
</style>
</head>
<body>
<!-- 有序列表：
无序列表：
定义列表： -->
<!-- 无序列表 ：
ul：创建无序列表
li:创建列表项
type属性可以修改项目符号
disc:实心圆点
square：实心方块
circle：空心圆
-->
<ul type="disc">
<li>我要学全栈</li>
<li>我要学全栈</li>
<li>我要学全栈</li>
</ul>
<hr>
<!-- 有序列表：
ol:创建无序列表
li:创建列表项
type属性修改项目符号
默认：1、2、3
a/A :A、B、C
i/I :罗马字符
-->
<ol type="A">
<li>我要学Java</li>
<li>我要学Java</li>
<li>我要学Java</li>
</ol>
<hr>
<!-- 列表之间是可以相互嵌套的 -->
<ul type="disc">
<li>嵌套</li>
<li>
<ol type="A">
<li>我要学Java</li>
<li>我要学Java</li>
<li>我要学Java</li>
</ol>
</li>
<li>我要学全栈</li>
<li>我要学全栈</li>
</ul>
<!-- 定义列表：dl
dt:被定义的内容
dd:定义内容的描述 -->
<dl>
<dt>武松</dt>
<dd>厉害的很</dd>
<dd>打死了老虎</dd>
<dt>武大郎</dt>
<dd>武松他哥</dd>
</dl>
</body>
</html>
7.2 测试结果
8、盒子模型
8.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
.box{
/*
使用width设置盒子内容区的宽度
使用height设置盒子内容区的高度
不是整个盒子的大小。内容区+内边距+边框=盒子大小
*/
width:400px;
height: 200px;
/*设置盒子的背景色*/
background-color: thistle;
/*
为盒子设置边框
border-width:边框的宽度
上右下左的顺序设置和的宽度。（如果设置了盒子的四个边框）
指定三个值，按照 上，左右，下
指定两个值：按照 上下，左右
border-color:边框的颜色
border-style:边框的样式;
*/
border-width: 5px 10px 15px 20px;
border-color: red;
border-style: solid;
}
.box1{
/*
简写border:同时设置四条边
border-left border-right border-tom border-bottom
*/
width: 200px;
height: 200px;
background-color: green;
/* border:red 5px solid; */
border-left: red 5px solid;
border-right:greenyellow 10px solid ;
}
</style>
</head>
<body>
<div class="box"> </div>
<br><hr>
<div class="box1"></div>
</body>
</html>
8.2 测试结果
9、内边距
9.1 代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型-内边距</title>
<style type="text/css">
.box{
width:400px;
height: 400px;
background-color: thistle;
border: 5px red solid;
/*
内边距：
内容区和盒子边框的距离
*/
padding-top: 40px;
padding-left: 20px;
padding-right: 30px;
padding-bottom: 10px;
}
.box1{
/* 占居内容区域*/
height: 100%;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
9.2 测试结果
10、外边距
10.1 代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型-外边距</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: thistle;
/*
如果值为负：代表反向移动的距离
margin-top: 距离上方距离;
margin-left:距离左边距离
margin-right:距离右边距离
margin-bottom:距离下边距离
如果只是指定margin-left或者margin-right。就自动设置边距为最大。同时设置则会居中
*/
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.box1 {
/* 占居内容区域*/
height: 100px;
width: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>
</html>
10.2 测试结果
11、块元素和行内元素、display
11、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素</title>
<style type="text/css">
a{
height: 100px;
width: 100px;
background-color: red;
/*
通过display可以修改元素的类型
可选值：
inline：将一个元素作为行内元素
block:将一个元素作为块元素
display:none 使用该方式隐藏元素，不会在页面中显示，不会占据页面内容
通过visibility:设置元素的隐藏和显示
visible:默认值，显示
hidden:隐藏
*/
display: block;
visibility: hidden;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<sapn>hello</sapn>
</body>
</html>
11.2 测试结果
12、overflow
12.1 、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow处理子类溢出</title>
<style type="text/css">
.box{
height: 200px;
width: 200px;
background-color: red;
/*
子元素是默认在父元素的内容区，正常情况不应该从内容区域跑出来。父元素会将溢出的内容显示在外部
可以使用overflow进行处理
可选值：
visible： 不做处理
hidden:溢出的内容会被修改
scroll：内容滚动
auto:自动添加水平或者垂直滚动条
*/
overflow: auto;
}
.box1{
height: 300px;
width: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>
12.2 测试结果
HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用的更多相关文章
- CSS基础知识---浮动，定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- 前端学习——css基础知识，选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- HTML与CSS基础知识补遗（一）
开始从零基础系统地学习前端知识了,虽说html和css多少了解一些,但是学着还是能发现很多新大陆.... 一. HTML中head标签 1. <meta>标签: meta标签里是一些基础的 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
随机推荐
- ABP 6.0.0-rc.1的新特性
2022-07-26官方发布ABP 6.0.0-rc.1版本,本文挑选了几个新特性进行了介绍,主要包括LeptonX Lite默认主题.OpenIddict模块,以及如何将Identity Ser ...
- HTTP的三次握手和四次挥手，以及DNS流程解析
首先模拟一个场景:你在浏览器输入自己想要访问的地址,浏览器发送请求到服务端,服务端进行响应,浏览器进行数据页面渲染,从而你得到自己想要访问地址的页面 总体流程图: DNS:可以认为域名与对应的ip转化 ...
- 基于vue2.0原理-自己实现MVVM框架之computed计算属性
基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法 写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body ...
- ESP32与MicroPython入门-01 搭建开发环境
ESP32简介 ESP32 是上海乐鑫公司开发的一款比较新的32位微控制器,它集成了WiFi及蓝牙等功能,有着性能稳定.功耗低.价格低廉等特点,非常适用于物联网开发,但也可以作为普通的MCU使用. E ...
- 如何定义 Java 的回调函数，与 JavaScript 回调函数的区别
JavaScript 中的回调函数 在 JavaScript 中经常使用回调函数,比如:get 请求.post 请求等异步任务.在我们请求之前以及请求之后,都需要完成一些固定的操作,比如:请求之前先从 ...
- 认识Chrome扩展插件
1.前言 现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome浏览器一家独大,具体数据请看 知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主 ...
- R数据分析：用R建立预测模型
预测模型在各个领域都越来越火,今天的分享和之前的临床预测模型背景上有些不同,但方法思路上都是一样的,多了解各个领域的方法应用,视野才不会被局限. 今天试图再用一个实例给到大家一个统一的预测模型的做法框 ...
- kingbaseES R3 集群备库转换为单实例库案例
案例说明: 在生产环境需要将集群中架构转换为单实例环境,本案例以备库转换为单实例库为案例,介绍了两种方案,一种在数据库数据量小的环境下采用 sys_dumpall 导出导入方式建立单实例库:另外一种是 ...
- k8s控制器和Pod Template的关系
Pod 本身并不能自愈(self-healing).如果一个 Pod 所在的 Node (节点)出现故障,或者调度程序自身出现故障,Pod 将被删除:同理,当因为节点资源不够或节点维护而驱逐 Pod ...
- 云原生虚拟网络 tun/tap & veth-pair
云原生虚拟网络 tun/tap & veth-pair 转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com/archives/684 ...