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遍.今天则是把 ...
随机推荐
- 跳转语句break、continue、return
1.break 语句 概念: break语句在循环中的作用是终止当前循环,在switch语句中的作用是终止switch. 示例: 输出结果: 2.continue 语句 概念: continue语句 ...
- 【原创】Auto.js get和post 案例
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! Auto.js get和post 案例 ...
- Tracer类定义
这个类主要是用于检测光线是否穿过球体.是核心,所有的碰撞都继承于这个类,书上也阐述了很多.详细就看书. 类定义: #pragma once #ifndef __TRACER_HEADER__ #def ...
- 设置Windows Server 2022、Win10、Win11自动登录的简单方法-OK
这里介绍自己从使用 Windows Server 2003 到 Windows Server 2022 一直都在使用的自动登录系统的方法,屡试不爽.网上讨论的方法太繁琐,所以共享出来,供大家参考.该方 ...
- 来看看这位年轻的 eBay 小伙是如何成为 Committer
介绍一下我自己 目前就职于eBay中国,专注于微服务中间件,分布式架构等领域,同时也是狂热的开源爱好者. 如何成为一个commiter 过去几个月,我一直持续在为 Apache DolphinSche ...
- feign远程调用出错
如果你传递的参数,比较复杂时,默认会采用POST的请求方式. 传递单个参数时,推荐使用@PathVariable,如果传递的单个参数比较多,这里也可以采用@RequestParam,Feign接口中不 ...
- 一、JDK和JRE
JDK和JRE JDK=JRE+开发工具包: JRE=JVM+核心类库 如果只是运行Java程序,安装JRE即可:开发Java程序并运行则需要安装JDK.目前最稳定版本是JDK8.0,并且马上部分企业 ...
- 渗透攻防Web篇-深入浅出SQL注入
1 背景 京东SRC(Security Response Center)收录大量外部白帽子提交的sql注入漏洞,漏洞发生的原因多为sql语句拼接和Mybatis使用不当导致. 2 手工检测 2.1 前 ...
- rh358 002 fact变量获取 ansible配置网络 service_facts
通过ansible 获取网络信息 1.如何获取fact事实变量 方式1: ansible servera -m servera 方式2: 剧本 [root@workstation ansible]# ...
- UIView Animation 动画学习总结
目录 一.前言 二.UIView Animation 2.1 简单动画 2.2 关键帧动画 2.3 View 的转换 三.CALayer Animation 3.1 基本动画(CABasicAnima ...