HTML5+CSS3 学习笔记 04

最新推荐文章于 2024-03-17 22:35:40 发布

A_bad_horse

最新推荐文章于 2024-03-17 22:35:40 发布

阅读量363

点赞数 1

分类专栏： HTML5+CSS3 文章标签： html5 css3

本文链接：https://blog.csdn.net/A_bad_horse/article/details/105219822

版权

HTML5+CSS3 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425

视频记录 93-126

Emment语法

提高html/css编写速度，Vscode已经集成该语法。
快速生成html结构语法
快速生成css样式语法

快速生成HTML结构语法

.demo$.*5

div{$}*5, div{文字}

快速生成CSS样式：首字母+tab

快速格式化代码：shift + alt + F

复合选择器：建立在基础选择器之上，对基本选择器进行组合而成。

更精确、更高效地选择目标元素（标签）
由两个或多个基础选择器，通过不同的方式组合而成。
包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。

写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：元素1 元素2 {样式声明}

<style>
    /* 只需要将Ol中的li选出来改为pink */
    ol li {
    color:pink
    }
</style>

<ol>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
</ol>
<ul>
    <li>ul的孩子</li>
    <li>ul的孩子</li>
    <li>ul的孩子</li>
</ul>

ol与li中间用空格隔开。
ol是父级，li是子级，最终选择的是li。
元素2可以是儿子，也可以是孙子等，只要是元素1的后台即可。

ol li a { // 中国 山东 济南 蓝翔 （类似）
    color: red;
}

<ol>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li><a href="#">我是孙子</a></li>
</ol>

遇到重复元素，则通过添加class处理

.nav  ol li a {
    color: red;
}

<ol>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li><a href="#">我是孙子1</a></li>
</ol>
<ol class="nav">
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li>ol的孩子</li>
    <li><a href="#">我是孙子2</a></li>
</ol>

子选择器（子元素选择器）:只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

语法：元素1>元素2{样式声明}

表示：元素1里面的所有直接后代（子元素）元素2。

.nav > a {
    color: red;
}

<div class="nav">
    <a href="#">我是儿子</a> //只会影响这行
    <p>
        <a href="#">我是孙子</a>
    </p>
</div>

并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1, 元素2 {样式声明}

div,
p {
    color: pink;
}

<div>熊大</div>
<p>熊二</p>
<ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>

//熊大 熊二都显示为粉色

div,
p, 
.pig li {
    color: pink;
}


<div>熊大</div>
<p>熊二</p>
<ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>


//熊大，熊二，小猪佩奇，猪爸爸，猪妈妈都显示为粉色

注：约定语法规范，并集选择器一般竖着写；最后一个元素后面没有逗号

伪类选择器

1.链接伪类选择器

/* 未访问过链接 */
a:link {
    color:#333;
    text-decoration: none;
}

/* 选择点击过的（访问过的）链接 */
a:visited {
    color: orange;
    text-decoration: none;
}

/* 选择鼠标经过的链接 */
a:hover {
    color: skyblue;
    text-decoration: none;
}

/* 鼠标按下但还没弹起的链接 */
a:active {
    color: green;
    text-decoration: none;
}

<a href="#">小猪佩奇</a>

注意事项：

必须按照LVHA顺序声明 link->visited->hover->active
记忆法：love hate
链接在浏览器中有默认样式，因此实际工作中需要给链接单独指定样式

body {
    color: red;
}

<body>
<a href="#">小猪佩奇</a>
</body>

//小猪佩奇 不会显示为红色

body {
    color: red;
}

a {
    color: red;
}

<body>
<a href="#">小猪佩奇</a>
</body>

//小猪佩奇 显示为红色

实际开发如下

2.focus伪类选择器

用于选取获得焦点的表单元素。焦点是光标，通常<input>类表单元素才能获取，因此该选择器主要针对表单而言。

input:focus {
    background-color: green;
}

元素显示模式

什么是元素显示模式：元素（标签）以什么方式显示。

HTML元素显示方式：块级元素和行内元素。

块级元素特点

独占一行
高度、宽度、外边距和内边距可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以存放行内或者块级元素。

块级元素注意点

文字类的元素内不能使用块级元素
<p>内不能使用<div>
<h1>-<h6>等都是块级元素，不能放其他块级元素。

行内元素

行内元素特点

相邻行内元素在一行上，一行可以显示多个 <span> <b>等

高度、宽度直接设置是无效的

a {
    width: 100px;
    height: 100px;
}

<a href="#">小猪佩奇</a>
//宽度、高度设置无效

默认宽度就是本身内容的宽度
行内元素只能容纳文本或其他行内元素

行内元素注意

链接内不能放链接
特殊情况链接<a>里面可以放块级元素

<img />,<input />,<td/>同时具有块元素和行内元素的特点，称为行内块元素。

行内块元素特点

显示模式转换

行内元素转为块级元素（重点）

 a {
    width: 100px;
    height: 100px;
    background-color: green;

   /* 将元素a转换为块元素 */
    display: block;
}

<a href="#">小猪佩奇</a>

块级元素转为行内元素

div {
    width: 100px; // 提示错误
    height: 100px; // 提示错误
    background-color: green;

    /* 将div块级元素转换为行内元素 */
    display: inline;
}

<div>我是块级元素1</div><div>我是块级元素2</div>

转换为行内块（重点）

span {
    width: 100px;
    height: 100px;
    background-color: green;
    display: inline-block;
}

<span>span1</span><span>span2</span>

snipaste工具

<style>
a {
    display: block;
    width: 230px;
    height: 40px;
    background-color: #55585a;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    text-indent: 2em;
}
a:hover {
    background-color: #ff6700;
}
</style>

<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记 本平板</a>
<a href="#">出行 穿城</a>
<a href="#">智能 路由器</a>
<a href="#">耳机 音响</a>

单行文字垂直居中：文字行高等于盒子高度即可

<style>
a {
    display: block;
    width: 230px;
    height: 40px;
    background-color: #55585a;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    text-indent: 2em;
    /* 文字垂直居中 */
    line-height: 40px;
}
a:hover {
    background-color: #ff6700;
}
</style>

<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记 本平板</a>
<a href="#">出行 穿城</a>
<a href="#">智能 路由器</a>
<a href="#">耳机 音响</a>

CSS背景

背景图片：描述元素的背景图像。background-image: none | url(url)

背景图片位置：background-position: x y; (x坐标和y坐标，使用方位名词或者精确单位)

方位名词与顺序无关

background-position: center right;
background-position: right center;

//效果一样

背景复合写法约定顺序：背景颜色、背景图片、背景平铺、背景图像滚动、背景图片位置。

background: black url(images/bg.jpg) no-repeat fixed center top;

background-color: black;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;

背景颜色半透明

/* 背景是黑色 alpha是指透明度 默认值为0*/
background: rgba(red, green, blue, alpha);

/* 背景是白色 */
background: rgba(red, green, blue, 1);

//最后一项取值介于0-1之间
background: rgba(red, green, blue, 0.3);

background: rgba(red, green, blue, .3); // 0.3的0可省略

alpha是指透明度，取值介于0-1之间。
背景半透明是指盒子背景半透明，盒子里的内容不受影响。
CSS新增属性，IE9+版本浏览器才支持。

A_bad_horse

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3 学习笔记 04

视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425视频记录 93-126Emment语法提高html/css编写速度，Vscode已经集成该语法。快速生成html结构语法快速生成css样式语法快速生成HTML结构语法...
复制链接

扫一扫

专栏目录