HTML 和 CSS 基础学习

最新推荐文章于 2024-04-25 20:22:26 发布

我只是学了一下编程

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量76

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/qq_57222058/article/details/125161486

版权

HTML 提供了大量元素，没一个元素都有特殊的用途，保证网页的丰富多样性：

区块：div
区分：span
文本：p、h1~h6、em、dt、dd
表格：table、tbody、thead、tr、td、th、tfoot、caption
表单：form、input、label、textarea、select
链接：a
图片：img
文档：html、head、title、body、meta
列表：ul、ol、li、dlside、footer、nav
其他：br、hr、iframe
结构：header、section、a、strong、pre、adderss、q、blcokquote、cite、code

文档声明

<!DOCTYPE html>

HTML 的基本元素

html 元素

是 HTML 文档的根元素，一个文档中只有一个，其他元素都是它的后代元素

W3C 标准建议为 html 元素增加 lang 属性

<html lang="en"></html>

作用是：

帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则

head 元素

head 元素里面的内容是一些元数据（描述数据的数据）

一般用于描述网页的各种信息，如字符编码、网页标题。网页图标

title
meta
style
link

h、p、strong、code、br、hr

字符实体

HTML 中有一些字符是预留出来作特殊用途的，比如

小于号(<)
大于号（>）

想要在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有两种

&entity_name: &nbsp(空格) &lt(小于号)
&#entity_number：&#160(空格) &#60（小于号）

span 元素

默认情况下，跟普通文本几乎没差别

用于区分特殊文本和普通文本，比如用来显示一些关键字。

对普通的文本进行归类。

div 元素

一般作为其他元素的容器，把其他元素包住，代表一个整体。

用于把网页分割为多个独立的部分。

img 元素

img 元素是单标签

img 元素的属性：

src：设置图片的路径，可以使用绝对路径或相对路径。
alt
width
height：使用很少

a 元素

定义超链接，用于打开新的 URL

属性：

href：链接地址。如果不写 href 属性，会被识别为普通文本。
target：打开方式
- _self
- _blank
- _parent：与 iframe 配合使用
- _top：与 iframe 一起使用

a 元素和 base 元素可以结合使用：

如果页面中要访问的 url 的域名或 ip 相同，可以抽离到 base 中。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <base href="https://www.baidu.com" target="_blank"> </head> <body> <a href="/">百度一下</a> <a href="/img/bd_logo1.png">百度logo</a> </body> </html>

锚点

 <a href="#">顶部</a> <a href="#title1">标题1</a> <a href="#title2">标题2</a> <a href="#title3">标题3</a> <h2 id="title1">我是内容1</h2> <h2 id="title2">我是内容2</h2> <h2 id="title3">我是内容3</h2>

伪链接

有时候点击链接的时候不希望打开新的 URL，而是希望做点别的事情，这时候就可以使用伪链接。

伪链接：没有指明具体链接地址的链接

点击伪链接之后具体来做什么事情，要编写对应的 js 代码。

如果暂时不需要做任何事情，可以用下面的形式

<a href="#" onclick="return false;">伪链接1</a> <a href="javascript:">伪链接2</a>

iframe

现在使用很少。

在网页中嵌套网页。

标签语义化的重要性

标签语义化指的是选择标签的时候尽量让每一个标签都有正确的语义。

虽然很多标签之间互换之后也能实现功能，但还要遵守标签语义化原则。

比如自己可以用一个 div 去加上相应样式模仿 h1 标签，但是不推荐这么做，标签语义化很重要。

列表

HTMl 提供了 3 组常用的用来展示列表的元素：

有序列表 ol、li
无序列表 ul、li
定义列表： dl、dt、dd

有序列表

ol (ordered list) 有序列表，直接子元素只能是 li(list item)

<ol> <li>海王</li> <li>海贼王</li> <li>上海堡垒</li> <li>星际穿越</li> </ol>

对于列表，Chorme 浏览器默认会加上如下样式元素。

/* user agent stylesheet */ ol { display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px; } /* user agent stylesheet */ li { display: list-item; text-align: -webkit-match-parent; }

浏览器默认加上了边距的样式，加边距的时候，Chrome 使用了 margin-block-**，而不是使用 margin-left 或其他的，是因为有些国家或地区在阅读时，可能是从右向左，这样设置更容易进行适配。

无序列表

ul (unordered list) 有序列表，直接子元素只能是 li(list item)。

默认样式等，与有序列表基本相同。

定义列表

dl(definition list)定义列表，直接子元素只能是 dt(definition term)、dd(definition description)。

dt：列表中每一项的项目名

dd：列表中每一项的具体描述，是对 dt 的描述、解释、补充。

一个 dt 后面一般紧跟着一个或多个 dd。

dt、dd 常见的组合是：

事务的名称、事务的描述
问题、答案
类别名、归属于这类的各种事务

<dl> <dt>红饮料</dt> <dd>西瓜汁</dd> <dt>黑饮料</dt> <dd>咖啡</dd> <dt>白饮料</dt> <dd>牛奶</dd> </dl>

表格

table: 表格

tr：表格中的行

td：行中的单元格

table 相关属性

table 的常用属性

属性	说明
border	边框的宽度
cellpadding	单元格内部的间距
cellspacing	单元格之间的间距
width	表格的宽度
align	表格的水平对齐方式 left、center、right

<table border="1" cellspacing="10" width="500" align="center"> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table>

tr 和 td 相关属性

tr 常见属性

属性	说明
valign	单元格的垂直对齐方式 top、middle、bottom、baseline
align	单元格的水平对齐方式 left、center、right

th 和 td 常见属性

属性	说明
valign	单元格的垂直对齐方式 top、middle、bottom、baseline
align	单元格的水平对齐方式 left、center、right
width	单元格的宽度
height	单元格的高度
rowspan	单元格可横跨的行数
colspan	单元格可横跨的列数

细线表格

使用 cellspacing = 0 边框会合在一起，但是边框宽度是 border*2。

可以使用 border-collapse 将边框合并。

table { border: 1px solid #000; border-collapse: collapse; }

表格的其他元素

thead 表格的表头

tbody 表格的主体内容放在 tbody 中

tfoot 表格的页脚

caption 表格的标题

th 表格的表头单元格

单元格的合并

合并方向是向右、向下。

colspan 跨列合并

rowspan 跨行合并

表格 CSS 属性

设置单元格之间的间距，使用这个，尽量不要使用上面的

border-spacing 用于设置单元格之间的水平、垂直间距。

2 个值分别是 cell 之间的水平、垂直间距
如果只设置一个值，同时代表水平、垂直间距

table { border-sapcing: 10px 20px; }

表单

表单常用元素：

form 表单一般情况下，其他表单元素都是它的后代元素
input 单行文本框、单选框、复选框、按钮等元素
textarea 多行文本框
select、option 下拉选择框
button 按钮
label 表单元素的标题
fieldset 表单元素组
legend fieldset 的标题

input 元素

**input 也是行内元素，准确地说是行内替换元素。**与 img 元素相似，页面最终展示的不是 img 元素，而是 img 中对应的那张图片，使用图片替换掉了 img 元素。input 也是，不展示编写的 input，而是展示成一个框。基本上所有的替换元素都是行内元素。

input 的 type 类型：

text 文本输入框（明文输入）
password 文本输入框（密文输入）
radio 单选框
checkbox 复选框
button 按钮
reset 重置
submit 提交表单数据给服务器
file 文件上传

input 其他属性：

maxlength 允许输入的最大字数
placeholder 占位文字
readonly 只读
disabled 禁用
checked 默认被选中
selected 下拉框默认选中选项
multiple 下拉框多选
autofocus 当页面加载时，自动聚焦
name 名字
value 取值
tableindex
form 设置所属的 form 元素（填写 form 元素的 id），一旦使用了此属性，input 元素即使不在 form 元素内部，它的数据也能提交给服务器。

布尔属性：

布尔属性可以没有属性值，写上属性就代表使用了这个属性。常见的布尔属性有，diasbled、checked、readonly、multiple、autofocus、selected。

如果要给这些布尔属性设置值，值就是属性名本身。

 <input type="text" readonly disabled> <input type="radio" checked> <input type="text" readonly="readonly" disabled="disabled"> <input type="radio" checked="checked">

按钮的两种实现方式，在 form 中 button 按钮如果不设置任何属性，默认的作用是重置。但如果 form 设置了 action 属性，那么默认行为是提交

 <input type="reset" value="重置"> <button>重置</button>

label 可以跟某个 input 绑定，点击 label 就可以激活对应的 input；有两种写法

<div> <label for="phone">手机</label> <input type="text" value="" id="phone"> </div> <label for="phone"> 手机 <input type="text" value="" id="phone"> </label> <div> <span>性别</span> <label for="male">男</label> <input type="radio" name="sex" id="male"> <label for="female">女</label> <input type="radio" name="sex" id="female"> </div>

input 去除边框，设置 CSS 属性 outline: none;

例子：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="" method="post"> <fieldset> <legend>必填信息</legend> <div> <label for="phone">手机</label> <input type="text" value="" id="phone"> </div> <div> <span>密码</span> <input type="password"> </div> <div> <span>验证码</span> <input type="text"> <input type="submit" value="获取验证码"> </div> </fieldset> <fieldset> <legend>选填信息</legend> <div> <span>照片</span> <input type="file"> </div> <div> <span>性别</span> <label for="male">男</label> <input type="radio" name="sex" id="male"> <label for="female">女</label> <input type="radio" name="sex" id="female"> </div> <div> <span>爱好</span> 唱<input type="checkbox" name="hobby"> 跳<input type="checkbox" name="hobby"> rap<input type="checkbox" name="hobby"> 篮球<input type="checkbox" name="hobby"> </div> <div> <span>学历</span> <select name="" id=""> <option value="0">小学</option> <option value="1">初中</option> <option value="2">高中</option> </select> </div> <div> <span>简介</span> <textarea name="" id="" cols="10" rows="3"></textarea> </div> </fieldset>  <input type="reset" value="重置">  <button>重置</button> <input type="submit" value="提交"> </form> </body> </html>

textarea 元素

常用属性：

cols 列数
rows 行数

缩放的 css 设置

禁止缩放 resize: none
水平缩放 resize: horizontal
垂直缩放 resize: vertical
水平垂直缩放（默认） resize: both

select 和 option

option 是 select 的子元素，一个 option 代表一个选项

select 常用属性：

multiple 可以多选
size 同时显示多少项

option 常用属性

selected 默认被选中

form 元素

常用属性：

action 提交地址
method 提交方法
target 跳转方式
- _blank：打开新页面跳转
- _self 在本页面跳转
enctype 规定了在向服务器发送表单数据之前如何对数据进行编码
- application/x-www-form-urlencoded 默认的编码方式
- multipart/form-data 文件上传时必须为这个值，并且 method 为 post
- text/plain 普通文本传输
accept 规定表单提交时使用的字符编码（默认 UNKNOW，和文档相同的编码）

Emmet 语法

！和 html:x

使用 ! 或 html[:x]，x 可以不写，或 5 或 xml，能够直接生成 html 模板。

> 子代和 + 兄弟

 <div> <p><span><strong></strong></span></p> </div>  <h2></h2> <div></div> <p></p>  <div> <h2></h2> <a href=""></a> <p><span></span></p> </div>

* 多个和 ^ 上一级

 <div> <p></p> <p></p> <p></p> </div>  <div><span></span></div> <div> <p></p> </div>  <div> <p><span></span></p> <p><span></span></p> </div> <h1></h1> <strong></strong>

() 分组

 <p><span></span></p> <h2></h2> <strong></strong>   <div> <p><span></span></p> <p><span></span></p> </div> <h1></h1> <strong></strong>

感觉还是找上一层 ^ 好用。

属性(id 属性、class 属性、普通属性) 和数字

<div id="main"></div>  <div class="box"></div>  <div title=""></div>  <div title="哈哈"></div>  <div id="main" class="box1 box2" title="test"></div>  <div id="main"> <div class="box"></div> <p class="p1"></p> <span class="title"></span> </div> <div id="footer"> <div class="box2"></div> </div>

{} 内容

 <div class="box">我是内容</div>

$ 数字

 <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div>  <ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>  <div class="box">我是内容1</div> <div class="box">我是内容2</div> <div class="box">我是内容3</div>

隐式标签

一些约定俗成，挡在不指定元素的时候，会根据情况生成元素。

一般情况下，隐式标签是代表 div 的，不过也可以代表 li 或 table

<div id="main"></div>  <div class="box"></div>  <div> <div class="wrap"> <div class="content"></div> </div> </div>  <ul> <li class="item1">列表元素1</li> <li class="item2">列表元素2</li> <li class="item3">列表元素3</li> </ul>  <table> <tr id="row1"> <td colspan="2"></td> </tr> <tr id="row2"> <td colspan="2"></td> </tr> <tr id="row3"> <td colspan="2"></td> </tr> <tr id="row4"> <td colspan="2"></td> </tr> </table>

CSS 的 Emmet 语法

部分举例。

.box { /* w200+h150+m20+p30 */ /* w200 */ width: 200px; /* h200 */ height: 150px; /* m20 */ margin: 20px; /* p30 */ padding: 30px; } .box2 { /* m20-20-40-50 */ margin: 20px 20px 40px 50px; } .box3 { /* p-10-20--30 */ padding: -10px 20px -30px; } .box4 { /* m10px20px */ margin: 10px 20px; } .box5 { /* m10px-20 */ margin: 10px -20px; }

字体的

.box{ /* fz20 */ font-size: 20px; /* fz1.5 */ font-size: 1.5em; /* fw700 */ font-weight: 700; /* lh40 */ line-height: 40; /* lh40px */ line-height: 40px; /* bgc#333 */ background-color: #333333; }

CSS

CSS 全称是 Cascading Style Sheets。

CSS3：是 CSS2.x 以后对某一些 CSS 模块进行升级更新后的称呼，比如 CSS Color Module Level 3、Select Level 3、CSS Namespaces Module Level 3。目前并不存在真正意义的 CSS 3。

常见的 CSS 属性的具体用途，大致可以分类为：

文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
字体：font、font-family、font-style、font-variant、font-weight
背景：background、background-color、background-image、background-repeat、background-attachment、background-position
盒子模型：width、height、border、margin、padding
列表：list-style
表格：border-collapse
显示：display、visibility、overflow、opacity、filter
定位：vertical-align、position、left、top、right、bottom、float、clear

CSS 元素类型

元素类型可以用两种方式进行划分

块级、行内级元素

根据元素的显示类型，即能否在同一行显示，HTML 元素可以主要分为两大类。

块级元素 block-level elements
- **独占父元素一行。**即==块级元素的宽度独占父级元素一整行==。高度会由内容撑起来。
- 如 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr 等
行内级元素 inline-level elements
- 多个行内级元素可以在父元素的同一行中显示
- 如 a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio 等

例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 500px; height: 500px; background-color: orange; } .inner { height: 30px; background-color: red; } p { background-color: palegreen; } </style> </head> <body>  <div class="box"> <div class="inner"></div> <p>我是段落</p> </div>  <span>我是span元素</span> <strong>我是strong元素</strong> <input type="text"> </body> </html>

替换、非替换元素

根据元素的内容类型，即是否浏览器会替换掉元素，HTML 元素可以主要分为 2 大类

替换元素 replaced elements
- 元素本身没有实际内容，浏览器会根据元素的类型和属性，来决定元素的具体显示内容
- 如 img、input、iframe、video、embed、canvas、audio、object 等
非替换元素 non-replaced elements
- 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
- 如 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label 等

行内非替换元素注意点

以下属性对行内非替换元素不起作用

width
height
margin-top
margin-bottom

下面例子中 margin-left 生效，而 margin-top 是无效的。width 和 height 也是无效的。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> span { background-color: red; width: 100px; height: 100px; margin-left: 20px; margin-top: 100px; } </style> </head> <body> <span>span1</span> <span>span2</span> </body> </html>

以下属性对行内元素比较特殊：

padding-top\padding-bottom
border-top\border-bottom

这几个属性设置后上下会多出来区域，但不会占据空间。给它们设置成行内块级元素 display: inline-block 可以解决此问题。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outer { margin-bottom: 100px; } span { background-color: red; } .span1 { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; /* display: inline-block; */ } .box1 { background-color: green; width: 100px; height: 50px; } .span2 { border-right: 10px solid purple; border-top: 10px solid blue; border-bottom: 10px solid yellow; /* display: inline-block; */ } </style> </head> <body> <div class="outer"> <span class="span1">span1</span> <span class="span1">span2</span> <div class="box1">div</div> <span class="span1">span3</span> </div> <div class="outer"> <span class="span2">span1</span> <span class="span2">span2</span> <div class="box1">div</div> <span class="span2">span3</span> </div> </body> </html>

元素分类总结

元素分类		具体元素	默认特性
块级元素（block-level elements）	替换元素 (replaced elements)
块级元素（block-level elements）	非替换元素(non-replaced elements)	div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr	独占父元素一行可以随意设置宽高高度默认由内容决定
行内级元素（inline-level elements）	替换元素 (replaced elements)	img、input、iframe、video、embed、canvas、audio、object等	跟其他行内级元素在同一行显示可以随意设置宽高
行内级元素（inline-level elements）	非替换元素(non-replaced elements)	a、strong、span、code、label等	跟其他行内元素在同一行显示不可以随意设置宽高宽高由内容决定

元素之间的空格

行内级元素（包括 inline-block 元素）的代码之间如果有空格，会被解析显示为空格。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 方法3 */ body { font-size: 0; } span, strong, div { font-size: 16px; float: left; /* 方法4 */ } span { background-color: blue; } strong { background-color: coral; } div { display: inline-block; background-color: red; } </style> </head> <body> <div> <span>span</span> <strong>strong</strong> <div>我是div元素</div> </div>  <div> <span>span</span><strong>strong</strong><div>我是div元素</div> </div>  <div> <span>span</span><strong>strong</strong><div>我是div元素</div> </div> </body> </html>

为什么会产生空格，因为浏览器在解析多个空格或换行符时，会将其解析成一个空格。上面的第一个 div 中 span、strong、div 各占一行，三者之间的空格被解析成了一个空格。第二个 div 中三者之间没有空格，浏览器中显示也没有空格。

目前存在的解决方案：

元素之间不要留空格（不建议）
元素之间写注释（繁琐，不建议）
设置父级元素 font-size: 0，然后在元素中重新设置自己需要的 font-size（不推荐）
- 此方法不使用 Safari
给元素加浮动，一般都是使用这种办法。

元素之间的嵌套关系

块级元素、行内块元素 inline-block：

一般情况下，可以嵌套任意的元素。如块级元素、行内级元素、inline-block 元素
特殊情况，p 元素不能包含其他块级元素

行内级元素（如 span、a、strong 等）

一般情况下，只能包含行内元素

CSS 样式应用

CSS 样式应用到元素上有 3 种方法：

内联样式（inline style）
文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）

在 Chrome 中的调试窗口可以看到有些样式右上角标注 user agent stylesheet，这是用户代理样式，即浏览器默认的标签样式。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> <style> /* 文档样式表 */ .document-style { color: blue; font-size: 60px; } </style> </head> <body>  <h1 style="color: red; font-size: 50px">哈哈哈</h1>  <h1 class="document-style">呵呵呵</h1>  <h1 class="external-style">咯咯咯</h1> </body> </html>

css 编码设置

关于外部样式表，推荐使用 utf-8

这样可以避免浏览器解析样式，出现中文时的编解码错误。如：font-family: '华文宋体'，如果不设置编码，可能就会出错。

@charset: "utf-8"

使用 @import 导入外部样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @import: url('./css/style.css'); </style> </head> <body> <h1 class="external-style">咯咯咯</h1> </body> </html>

使用 @import 引入和 <link> 进行引入都可以。

设置网页图标

<link rel="icon" type="image/x-icon" href="">

link 元素可以用来设置网页的图标

link 元素的 rel 属性不能省略，用来指定文档与链接资源的关系
一般 rel 若确定，响应的 type 也会默认确定，所以可以省略 type
网页图标支持图片格式是 ico、png，常用大小是 16*16、24*24、32*32 像素

CSS 选择器（selector）

CSS 选择器就是按照一定的规则，选择出符合条件的元素，为之添加 CSS 样式。

选择器种类大概可以分为：

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id 选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

通用选择器

选择所有的元素。

* { color: red; }

一般是用来给所有元素做一些通用性的设置。

* { margin: 0; padding: 0; }

元素选择器

选择指定的元素。

div { color: red; }

class 选择器

注意点：

一个元素可以有多个 class，每个 class 之间用空格隔开
class 值如果由多个单词组成，` 单词之间可以使用中划线

id 选择器

通过 id 选择选择指定元素，每个 id 值在一个文件中应该只出现一次。

属性选择器

根据属性进行选择，比如

[title="test"] { color: red; } [title*="test"] { color: red; }

后代选择器

又叫组合选择器，包含直接和间接所有的。

<style> div span { color: red; } </style> <span>文字内容1</span> <div class="box"> <span>文字内容2</span> <p> <span>文字内容3</span> </p> <div> <span>文字内容4</span> </div> <span>文字内容5</span> </div> <span>文字内容6</span>

选中 div 下面 span 元素，所以选中的是 2/3/4/5。

子代选择器

选择直接的子元素，只包含子代的。

<style> div > span { color: red; } </style> <span>文字内容1</span> <div class="box"> <span>文字内容2</span> <p> <span>文字内容3</span> </p> <div> <span>文字内容4</span> </div> <span>文字内容5</span> </div> <span>文字内容6</span>

所以符合规则的是 2/4/5

p 标签中不可以包含 div，包含的话结构会直接乱掉。

相邻兄弟选择器

div 元素后面紧挨着的元素（且 div、p 元素必须是兄弟关系）

<style> div+p { color: red; } </style> <p>文字内容1</p> <div> <p>文字内容2</p> </div> <p>文字内容3</p> <p>文字内容4</p>

符合规则的是 3

全体兄弟选择器

div 元素后面的 p 元素（且 div、p 元素必须是兄弟关系）

<style> div~p { color: red; } </style> <p>文字内容1</p> <div> <p>文字内容2</p> </div> <p>文字内容3</p> <p>文字内容4</p>

符合规则的是 3/4

选择器组

交集选择器

同时符合 2 个条件的元素：div 元素、class 值有 one 的元素

<style> div.one[title="test"] { color: red; } </style> <div class="one"> <p>文字内容1</p> </div> <div class="two">文字内容2</div> <p class="one">文字内容3</p> <div class="one" title="test">文字内容5</div> </body>

符合规则的是 5

并集选择器

所有的 div 元素 + 所有 class 值有 one 的元素 + 所有 title 属性值等于 test 的元素。

<style> div, .one, [title="test"] { color: red; } </style> <div class="one">文字内容1</div> <span title="test">文字内容2</span> <p class="one">文字内容3</p>

符合条件的有 1/2/3

伪类选择器（pseudo-classes）

常见的伪类有

动态伪类（dynamci pseudo-classes）
- :link、:visited、:hover、:active、:focus
目标伪类（target pseudo-classes)
- :target
语言伪类(language pseudo-classes) 使用较少
- :lang()
元素状态伪类(UI element state pseudo-classes)
- :enabled、:disabled、:checked
结构伪类(structural pseudo-classes)
- :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
- :first-child、:last-child、first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
否定伪类(negation pseudo-classes)
- :not()

目标伪类

使用较少，一般在锚点中使用。

比如点击某个锚点，让选中的标题变颜色。

/* 选中的锚点字体变成红色 */ :target { color: red; }

元素状态伪类

使用较少

设置某个元素处于某种状态时设置样式

<style> button:enabled { color: green; } button:disabled { color: blue; } </style> <button>我是按钮1</button> <button disabled>我是按钮2</button>

设置按钮在可用时是绿色，不可用时是蓝色。

动态伪类

a 元素上的使用

使用举例，可以在 a 链接上设置。

a:link：未访问的链接
a:visited：已访问的链接
a:hover：鼠标移动到链接上
a:active：激活的链接（鼠标在链接上长按住未松开）

<style> /* 给a元素设置样式，会应用到所有伪类 */ a { font-size: 20px } a:link { color: red; } a:visited { color: gray; } a:hover { color: blue; } a:active { color: orange; } </style> <a href="">Google一下</a>

如果给 a 元素设置样式，相当于给 a 元素的所有动态伪类都设置了。

要注意：

:hover 必须放在 :link 和 :visited 后面才能生效。
:active 必须放在 :hover 后面才能完全生效。

官方推荐的顺序是上面的顺序 link visted hover acitve。

记忆小技巧：女朋友看到 LV 后，ha ha 大笑，哈哈哈。

其他元素上的使用

:hover、:active 也可以用到其他元素上：

<style> strong:hover { color: blue; } strong:active { font-size: 30px; } </style> <strong>哈哈</strong>

:focus 的使用

:focus 指当前拥有输入焦点的元素（能接收键盘输入）

文本输入框聚焦后，北京变为灰色

input:foucs { background: gray; }

因为链接 a 元素可以被键盘 Tab 键选中聚焦，所以 :focus 也适用于 a 元素

<style> a:focus { color: yellowgreen; } </style> <a href="">哈哈</a>

所以此时链接 a 上可以有五种动态伪类，建议的编写顺序为：

:link、:visited、:focus、:hover、:active

记忆：女朋友看到 LV 包包后，Feng 了一样地 ha ha 大笑。

去掉 a 元素的 :focus

开发过程中，a 标签很多时候不希望获得 foucs 获取焦点。可以使用一些 css 的方法：

a:focus { outline: none }

这种方法其实是选中了，只是看不出来效果。

第二种办法，给 a 标签加上属性 tabindex，这个属性是添加 Tab 键的选中顺序。

<a tabindex="-1" href="">Google一下</a>

设置成 -1 之后，Tab 键是无法选中的。

结构伪类

:nth-child()

子元素选择器，选中第几个子元素改变样式。

<style> /* 交集选择器 * 是一个p元素 * 同时p元素作为子元素的第三个元素 */ p:nth-child(3) { color: red; } </style> <body> <div> <p>文字内容1</p> <p>文字内容2</p> <p>文字内容3</p> <p>文字内容4</p> <p>文字内容5</p> </div> <div>我是个div</div> <p>文字内容6</p> </body>

文字内容 3 和 6 会变为红色。

:nth-child() 根据 n 选择设置颜色，可以根据自己的需求，进行相关的计算。

一个例子

<style> p:nth-child(4n+1) { color: red; } p:nth-child(4n+2) { color: blue; } p:nth-child(4n+3) { color: green; } p:nth-child(4n+4) { color: orange; } </style> <body> <div> <div>div</div> <p>文字内容1</p> <p>文字内容2</p> <p>文字内容3</p> <p>文字内容4</p> <span>span</span> <p>文字内容5</p> <p>文字内容6</p> </div> </body>

p 标签的颜色从上至下依次是：蓝、绿色、橘色、红色、绿色、橘色。

:nth-last-child()

:nth-child() 是正着数，:nth-last-child() 是倒着数。

其他的特性和 :nth-child() 是一样的。

:nth-last-child(1) 倒数第一个子元素；

:nth-last-child(2n) 选中偶数的子元素；

nth-last-child(-n+2)，代表最后两个子元素。

:nth-of-type()

:nth-of-type() 用法和 :nth-child() 类似，不同点是 :nth-of-type() 计数时只计算同种类型的元素。

忽略其他类型，只选择同类的子元素进行样式添加。

<style> p:nth-child(3) { color: blue; } p:nth-of-type(3) { color: red; } </style> <body> <div> <div>div</div> <p>文字内容1</p> <p>文字内容2</p> <p>文字内容3</p> <p>文字内容4</p> <span>span</span> <p>文字内容5</p> <p>文字内容6</p> </div> </body>

文字内容 2 变成蓝色，文字内容 3 变成红色。:nth-child() 会在所有的子元素中进行选择，:nth-of-type() 只会在同类的子元素中进行选择。

nth-of-type(2n) 或 :nth-of-type(2n+1) 表示从相同的子类中选择偶数或奇数。使用同上面的是一个原理。

假如说这样写就表示找每个类型的偶数。

:nth-of-type(2n) { color:red; }

再来看这例子，样式改变是什么哪些：

<style> p:nth-of-type(2) { color: red; } </style> <body> <div> <p>文字内容1</p> <div> <p>文字内容2</p> </div> <div> <div> <p>文字内容3</p> </div> <p>文字内容4</p> <p>文字内容5</p> </div> <p>文字内容6</p> </div> </body>

变红色字体的是 5 和 6

:nth-last-of-type()

同理 nth-of-type()，唯一不同是，倒过来找。不再赘述。

其他伪类

:first-child 等同于 :nth-child(1)
:last-child 等同于 :nth-last-child(1)
:first-of-type 等同于 :nth-last-of-type(1)
:only-child 是父元素中唯一的子元素，选中。
<style> body :only-child { color: red; } </style>  <body> <p>文字内容1</p> <div> <p>文字内容2</p> </div> <div> <div> <p>文字内容3</p> </div> <p>文字内容4</p> <p>文字内容5</p> </div> <p>文字内容6</p> </body>
only-of-type，是父元素中唯一的这种类型的子元素。
<style> body :only-of-type { color: red; } </style>  <body> <div> <p> <span>文字内容1</span> </p> <div>文字内容2</div> <div>文字内容3</div> </div> <div> <strong>文字内容4</strong> <a href=""> <span>文字内容5</span> </a> </div> </body>
:root 根元素，也就是 html 元素。下面两种写法等价
html { } :root { }
:empty 选中元素内容为空的元素。
<style> :empty { height: 20px; background-color: red; } </style>  <body> <div> <p></p> <span>文字内容1</span> </div> <div> <strong>文字内容2</strong> <a href="">文字内容3</a> <div></div> </div> </body>

:not() 否定伪类

:not() 的格式是 :not(x)，表示除 x 以外的元素。

x 是一个选择器，可以是：元素选择器、通用选择器、属性选择器、类选择器、id 选择器、伪类（除否定伪类）。

<style> body :not(div) { color: red; } </style>  <body> <div>文字内容1</div> <p>文字内容2</p> <span>文字内容3</span> <div>文字内容4</div> </body>

:not() 中的参数也可以是类名或者 id 名

伪元素选择器 (pseudo-elements)

伪元素可以看成是行内元素。

常用的伪元素有：

:first-line、::first-line
:fitst-letter、::first-letter
:before、::before
:after、::after

为了区分伪元素和伪类，建议伪元素使用 2 个冒号，如 ::first-line

::first-line

选中第一行，针对首行文本设置属性

div::first-line { color: blue; text-decoration: underline; }

只有下列属性可以应用到 ::first-line 上：

字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height

::first-letter

选中第一个字母，针对首字母设置属性

div::first-letter { color: blue; font-size: 30px; }

只有下列属性可以应用在 ::first-letter 上：

字体属性、margin 属性、padding 属性、border 属性、颜色属性、背景属性
text-decoration、text-transform、letter-spacing、word-spacing(适当的时候)、line-height、float、vertical-align(只有当 float 是 none 时)

::before 和 ::after

::before 和 ::after 用来在一个元素内容之前或之后插入其他内容(可以是文字、图片)。

span::before { content: "1"; color: red; margin-right: 5px; } span::after { content: "abc"; color: purple; margin-left: 5px; } </style> <body> <span>我是一个span</span> </body>

这个元素中，不能省略 content 属性，即使里面是空字符串，属性是不能删除的。

div::before { content: ""; display: inline-block; width: 100px; height: 20px; background-color: red; } div::before { content: url("bg001.png") }

CSS 常用属性

color 前景色，不止字体颜色，例如还可以作用 border 边框，或 text-decoration:line-through。
font-size 字体大小
background-color 背景颜色
width/height 宽高

宽度和高度不适用与非替换行内元素

颜色设置的方法

基本颜色关键字 red、black、yellow、blue 等，只有上百种基本颜色的关键字。
RGB 颜色十进制：rgb()
RGBA 颜色：和十进制之前相同，a 指 alpha，透明度。如：rgb()
RGB 颜色十六进制：#FFFFFF

查看网站布局的技巧

在浏览器中打开开发者工具，然后添加一个新的 div 全局样式属性，增加 outline 就可以进行布局结构的查看

div { outline: 2px solid red !important; }

CSS 属性-文本

文本 text-transform

转换文本大小写

文本 text-decoration

text-decoration 用于设置文字的装饰线

很多时候用来去掉 a 标签的下划线。

a { text-decoration: none; }

还有就是比如用来加删除划线，划掉原来的价格。

html 中的 u 标签，是设置了这个属性

/* u标签默认样式 */ u { text-decoration: underline; }

文本 letter-sapcing

设置之母之间的间距

文本 word-spacing

设置单词之间的间距

文本 word-break

指定非中日韩脚本的单词换行规则。

文本 text-ident

设置文本首行缩进。

可以使用但是 em 进行首行缩进。比如说，一段文本中的字体大小是 20px，想要首行缩进 2 个字，可以使用 text-indent: 40px; 或 text-indet: 2em;

p { text-indent: 40px; text-indet: 2em; }

文本 text-align

设置元素内容在元素中的水平对齐方式。

div { background-color: #0f0; text-align: center; }

可以用户设置 div 中的元素，文本，图片等。

可以设置元素内容居中，但是不能设置 div 居中。因为 div 是块级元素，父级的盒子会认为它自己内部的盒子本身宽度和自己是一致的，所以是不会对内部的盒子产生作用。

<style> .box { background-color: #0f0; text-align: center; } .inner { background-color: purple; width: 200px; } </style> <div class="box"> <div class="inner">我是div</div> </div>

如果不设置 inner 的宽度，看起来好现实 box 中设置的元素内容居中作用在了 inner 的 div 盒子上，其实不是的，由于继承，inner 盒子也有了文本设置属性，他只是作用在了 inner 盒子的内容上。

可以这样改

.inner { background-color: purple; width: 200px; display: inline-block }

文本 text-shadow

text-shadow 用法与 box-shadow 类似，是用来设置文字阴影的。

text-shadow 同样适用于伪元素 ::first-line、::first-letter

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> h1 { text-shadow: 5px 5px 3px orange; } p::first-line { text-shadow: 3px 3px 3px green; } p::first-letter { font-size: 25px; text-shadow: 5px 5px 5px purple; } </style> </head> <body> <h1>你好啊</h1> <p> 无论是灾区搜救的机器人、无人驾驶的汽车、还是监视地面影像的卫星，穿透云层和雾霾的能力都非常有用。目前，科学家已开发出最先进的再成像系统LiDAR，通过配套的算法——可以测量单个光子的运动。这项技术特别与众不同之处在于，它可以复原被障碍物散射和反射掉的光子。 </p> </body> </html>

CSS 属性-字体

Google 浏览器设置字体，最小是 12px，再小其实就看不清楚了。

浏览器默认字体的大小是浏览器自己设置的，例如 chrome 浏览器我们就可以自己在设置中进行字体样式的相关设置。

字体 font-size

决定文字的大小。字体默认浏览器设置的大小是 16px

常用设置：

具体数值 + 单位，如 100px

也可以使用 em 单位，如 1em 代码 100%，2em 代表 200%，0.5em 代表 50%。或者使用 rem 单位，现在移动端使用很多。

<style> .box { font-size: 18px; } p { /* 相对于父级box的字体大小，所以字体大小是2*18px */ font-size: 2em; } </style> </head> <body> <div class="box"> <span>我是span元素</span> <p>我是段落，哈哈哈</p> </div> </body>

字体 font-family

用于设置字体的类型。如微软雅黑

当设置某种字体的时候，浏览器会去读取操作系统中是否有这种字体，Windows 下会去 C:\Windows\Fonts 目录下寻找设置的字体是否存在，如果有就会去使用这种字体。

如果没有这种字体，那么设置的字体将失效。为了防止设置的字体刚好操作系统不存在，一般会一次性设置多个字体

font-family: Arial, Helvetica, sans-serif;

字体中间有空格，可以使用单引号包含起来。

浏览器会从左至右依次选择设置的字体，直到找到可用的字体，如果都不存在，那么浏览器会使用操作系统的默认字体。

一般情况下，英文字体只适用于英文，中文字体同时适用于中文和英文。所以在开发中，中英文需要使用不同的字体，可以将英文字体写在前面，中文字体写在后面。

div { font-family: "Courier New", "宋体" }

字体 font-weight

设置文本的粗细。

使用某些 html 标签，如 h1~h6、b、strong，其实是浏览器给这些标签设置了 font-weight 属性，显示出来的字体就是加粗的。标签也是设置了 css 样式而已。

/* h1的默认样式 */ h1 { display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; } /* b标签默认样式 */ b { font-weight: bold; }

字体 font-style

用于设置文字的常规、斜体显示。

如使用 i 标签，是加上了这个属性。

i { font-style: italic; }

我们很少使用这种标签，一般会使用字体样式来设置。

i 标签使用很多，都会使用 i 标签和伪类配合，来设置小图标之类的。

字体 font-variant

影响小写字母的显示形式。

small-caps 将小写字母替换为缩小过的大写字母规格。

字体 line-height

用于设置文本的最小行高。

简单理解

行高可以简单理解为一行文本所占据的高度。

例子：

<style> .box { background: green; font-size: 18px; } </style> <div class="box"> 我是div元素 </div>

设置的文本，在浏览器中显示，文本在盒子中占据了一定的高度，但要注意的是，文本占据的高度并不等于文字的高度，我们的直观印象会认为，一行文本占据的高度等于文本的高度，但这是不一定的。

打开浏览器选中“我是 div 元素”文本，我们可以看到，默认情况下文本占据的高度其实是大于文字的高度的，文本上下都多出来一部分区域。

上面的 div 我们并没有设置高度，不过我们都知道是有高度的，这个高度我们通常会说是里面的内容撑起来的。准确来说，撑起来 div 高度的就是文本的行高。

为什么要有行高呢？比如说我们在读一首诗时，这首诗是竖着读还是横着读，我们会自动根据这个诗字体间的间距去决定该怎样去读。就是因为这些文字之间有间距，我们潜移默化地会去决定怎样读这段文字。

严格定义

行高的严格定义是，两行文字基线(baseline)之间的间距。

baseline：与小写字母 x 最底部对齐的线。

行距：当前文本底线和下一行文本顶线之间的距离。

根据行高的定义，我们知道了行高就是右侧标出是行高的那根黑线即两条基线之间的高度，我们又可以知道其实右侧三条黑色箭头代表的高度都是行高。

我们要注意区分 height 和 line-height 的区别：

height：元素的整体高度
line-height：元素中每一行文字所占据的高度

行高一个最常用的实例就是，让一行文字在 div 内部进行垂直居中。

<style> .box { font-size: 20px; height: 50px; line-height: 50px; background: green; } </style> <div class="box"> 我是div元素 </div>

上面的文字在 div 中是垂直居中的。

假如说当前的行高是 30px，文本的高度是 20px，现在行距就是 10px，文本在排布的时候，上下距离各 5px。所以上面的例子，设置的行高应该就是 div 盒子的高度，那么文字正好是居中的，距离上下各 15px。

所以文本为什么可以居中，就是因为行高设定之后，行距会等分。

这个时候，其实 height 是可以不写的，行高已经将盒子撑起来了。当然，没有文本时，行高也没有意义。

字体 font 多写属性

可以同时设置多个属性

font: font-style font-variant font-weight font-size/line-height font-family

比如

.box { font-size: 18px; font-family: "宋体"; font-weight: bold; font-style: oblique; font-variant: small-caps; line-height: 50px; } /* 可写成 */ .box { font: oblique small-caps bold 30px/50px "宋体"; }

其中 font-style、font-variant、font-weight 可以随意调换顺序，也可以省略，不设置。

/line-height 可以省略，如果不省略，必须跟在 font-size 后面。

CSS 属性-列表

列表常见的 CSS 属性有四个，列表属性用的很少。

list-style-type
list-style-image
list-style-position
list-style

它们都可以继承，所以设置给 ol、ul 元素，默认也会应用到 li 元素。

列表 list-style-type

设置 li 元素前面标记的样式

none 去除标记样式
dics 实心圆
circle 空心圆
square 实心方块
decimal 阿拉伯数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字

列表 list-style-image

设置某张图片为 li 元素前面的标记，会覆盖 list-style-type 的设置。

列表 list-style-position

设置 li 元素前面标记的位置：

outside
inside

列表 list-style

是 list-tyle-type、list-tyle-image、list-tyle-position 的缩写属性。

ul { list-style: outside url("image/dot.png"); }

一般最常用对还是直接设置为 none，去掉前面的默认标记 list-style: none。

CSS 属性-表格

CSS 属性-display

块级元素是浏览器给它默认加上了块级元素的属性。

display 属性能够改变元素的显示类型，常见常用的：

block 让元素显示为块级元素
inline 让元素显示为行内级元素
inline-block 让元素同时具备行内级、块级元素的特征。即既可以跟其他行内级元素在同一行显示，也可以随意设置宽高。若没有设置宽高，宽高有内容决定。可以理解为，对外是一个行内级元素，对内是一个块级元素。
none 隐藏元素元素不再占用空间

以下取值，等同于某些 HTML 元素：

table
inline-table
一个 block-level 表格
table-row
table-row-group
table-header-group
table-footer-group
table-cell
一个 inline-level 表格

我只是学了一下编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 和 CSS 基础学习

HTML 提供了大量元素，没一个元素都有特殊的用途，保证网页的丰富多样性作用是：head 元素里面的内容是一些元数据（描述数据的数据）一般用于描述网页的各种信息，如字符编码、网页标题。网页图标HTML 中有一些字符是预留出来作特殊用途的，比如想要在网页中正确地显示这些预留字符，必须使用字符实体，书写格式一般有两种默认情况下，跟普通文本几乎没差别用于区分特殊文本和普通文本，比如用来显...
复制链接

扫一扫