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遍.今天则是把 ...
随机推荐
- SpingBoot解析Excel数据
前言 在最近的工作中,由于导入模板除了前三列(姓名.手机号.实发工资)固定:其余的列不固定,并且可以做到两个模板的数据都能够正常入库进行对应业务处理. 一.数据模板数据展示: (1)模板一 (2)模板 ...
- [跨数据库、微服务] FreeSql 分布式事务 TCC/Saga 编排重要性
前言 FreeSql 支持 MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/Gbase/神通/人大金仓/翰高/Clickhouse/MsAcc ...
- Taurus.MVC 微服务框架 入门开发教程：项目部署：5、微服务应用程序发布到Docker部署（下）。
系列目录: 本系列分为项目集成.项目部署.架构演进三个方向,后续会根据情况调整文章目录. 开源地址:https://github.com/cyq1162/Taurus.MVC 本系列第一篇:Tauru ...
- 2020牛客NOIP赛前集训营-提高组（第二场）- B.包含 （FWT）
题面 题解 这题就是个快速沃尔什变换的模板题,输入ai时,令s[ai]=1,对s[]做一遍DWT_AND(s)(快速沃尔什正变换,按位与),然后直接访问s[x]完事. #include<map& ...
- Cannot resolve method 'println(java.lang.String)'
jsp文件中println爆红 <% int sum = 0; for (int i = 1; i <=100 ; i++) { sum+=i; } out.println("& ...
- 【java】学习路径31-文件IO基本操作(未涉及到流)
一.初始化: File f1 = new File("//Users//Shared//JavaIOTest//Test01.txt"); File f2 = new File(& ...
- 没写完。【java】IDEA-调教界面、设置语言、插件的使用
步骤: 1.官方网站:https://www.jetbrains.com/idea/ (zip)版本:https://download.jetbrains.com.cn/idea/ideaIC-202 ...
- HCNP Routing&Switching之DHCP安全
前文我们了解了MAC地址防漂移技术,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16632239.html:今天我们来了解下DHCP安全相关话题: 回顾DHC ...
- django_day01
内容回顾 django处理浏览器的请求流程: 请求发送到wsgi wsgi封装了请求的相关数据(request) django去匹配路径 根据路径判断要执行哪个函数 执行函数 函数执行具体的业务逻辑 ...
- Zookeeper 分布式事务锁的使用
使用Netflix的包 curator-recipes pom文件引入相关依赖 <dependency> <groupId>org.apache.zookeeper</g ...