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遍.今天则是把 ...
随机推荐
- LuoguAT2827 LIS （LIS）
裸题 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm ...
- MySQL 数据定义语句
表相关 修改表名 alter table grade rename hang; 新增表字段 alter table grade add `name` varchar(100); 修改表字段类型 alt ...
- jQuery 判断父节点下是否有子节点
查找父节点下是否有子节点有两个情况:(1)查找的是父元素的所有后代节点:(2)仅查找父元素的第一代子节点. <div id="app"> <div> < ...
- 为什么各大厂自研的内存泄漏检测框架都要参考 LeakCanary？因为它是真强啊！
请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...
- JavaScript基础回顾知识点记录3
js 中 垃圾回收 //将不在使用的对象设置为null , js就会自动进行垃圾回收机制 var obj = {}; obj = null; js 中 数组基本介绍 数组也是一个对象 与普通对象功能类 ...
- 第九十二篇：Vue 自定义指令
好家伙, 1.什么是自定义指令? vue官方提供了v-text,v-for,v-model,v-if等常用的指令.除此之外vue还允许开发者自定义指令. 2.自定义指令的分类 vue中的自定义指令分为 ...
- 使用man手册查看内核函数
1.为避免man的一些功能缺失,先装好manpages-dev sudo apt-get install manpages-dev 2.安装mandocs的依赖包xmlto sudo apt-get ...
- 如何守护数据安全？ 这里有一份RDS灾备方案为你支招
当今世界是一个充满着数据的互联网世界,生活的方方面面都在不断产生着数据,比如出行记录.消费记录.浏览的网页.发送的消息等等.除了文本类型的数据,图像.音乐.声音都是数据.对于企业而言,数据更是重要的生 ...
- KingbaseES R3 集群主库归档失败案例
案例说明: 本案例用于KingbaseES R3集群归档进程归档日志失败的处理,对于一线的生产环境具有 一定的参考意义. 数据库版本: TEST=# select version(); VERSION ...
- Servlet小结
1.sevlet的生命周期 用户在发送第一次请求的时候Servlet对象被实例化(AServlet的构造方法被执行了.并且执行的是无参数构造方法.) AServlet对象被创建出来之后,Tomcat服 ...