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遍.今天则是把 ...
随机推荐
- DolphinScheduler 功能开发：⼯作流级别任务空跑（后端），测试工作流是否正确执行...
点击上方 蓝字关注我们 ✎ 编 者 按 在今年由中国科学院软件研究所主办的开源软件所供应链点亮计划-开源之夏活动中,有不少小伙伴提交了关于 DolphinScheduler 的项目,本期是来自成都信息 ...
- 使用 DolphinScheduler 调度 Kylin 构建
本文章经授权转载 Apache Kylin 上游通常有复杂的数据 ETL 过程,如 Hive 入库.数据清洗等:下游有报表刷新,邮件分发等.集成 Apache DolphinScheduler 后,K ...
- Canvas 非常重要的三个函数
beginPath 绘制路径必须添加 beginPath().它标志着一个画笔在画布中哪个地方开始画起.没有它,新起的画笔位置必定与上一次画笔结束的位置相连. // 第一个半圆 ctx.arc(60, ...
- java单线程100%利用率
容器内就获取个cpu利用率,怎么就占用单核100%了呢 背景:这个是在centos7 + lxcfs 和jdk11 的环境上复现的 目前这个bug已经合入到了开源社区, 链接为 https://git ...
- 服务器时间同步架构与实现chrony
实验背景 模拟企业局域服务器时间同步,保障各服务器系统准确性和时间一致性. 时间服务器系统搭建 实验架构图 环境设备 设备IP规划 国内互联网NTP服务器 ntp.aliyun.com #阿里云NTP ...
- Downie for Mac最强视频下载工具(支持B站优酷土豆腾讯等)
我搜集到的一款简单拖放链接到Downie,它就会下载该网站上的视频.理论可以下载各种视频网站上的视频! 应用介绍 Downie 是一款Mac平台上的优秀视频下载软件,使用非常简单,只需将下载链接放置D ...
- 系统CPU飙高，怎么排查？
cpu是整个电脑的核心计算资源,对于一个应用进程来说,cpu的最小执行单元是线程. 导致cpu飙高的原因有几个方面: cpu上下文切换过多,对于cpu来说,同一时刻下每个cpu核心只能运行一个线程,如 ...
- 抛砖系列之git仓库拆分工具git-filter-repo
最近负责把团队内的git仓库做了一次分拆,解锁一个好用的工具git-filter-repo,给大伙抛砖一波,希望以后遇到类似场景时可以信手拈来. 背景 笔者团队目前是把业务相关的java项目都放到了一 ...
- 第七十七篇：ref引用(在vue中引用组件实例)
好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...
- 数据结构与算法【Java】05---排序算法总结
前言 数据 data 结构(structure)是一门 研究组织数据方式的学科,有了编程语言也就有了数据结构.学好数据结构才可以编写出更加漂亮,更加有效率的代码. 要学习好数据结构就要多多考虑如何将生 ...