css基础学习二

最新推荐文章于 2023-08-10 14:05:04 发布

大巴黎咚咚咚

最新推荐文章于 2023-08-10 14:05:04 发布

阅读量188

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/sk142536/article/details/121943657

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

感谢黑马培训提供的学习资料

emmet语法

Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度。

快速生成html结构

生成标签。直接输入标签名，然后按tab键。比如 div 然后按 tab 键，就可以生成 <div></div>
如果想要生成多个相同标签在后面加上*就可以了。比如 div*3 就可以快速生成3个div。
如果有父子级关系的标签，可以用 > 。比如 ul > li。

<!-- ul>li-->
    <ul>
        <li></li>
    </ul>

如果有兄弟关系的标签，用 + ，比如 div+p 。

<!--div+p-->
    <div></div>
    <p></p>

如果生成带有类名或者id名字的标签，直接写标签名.类名或者标签名 #id名，然后按 tab 键即可。

<!--ul>li.green-->
    <ul>
        <li class="green"></li>
    </ul>
<!--p#red-->
    <p id="red"></p>

自增符号$可以顺序递增创建

<!--ul>li.green$*2-->
    <ul>
        <li class="green1"></li>
        <li class="green2"></li>
    </ul>

如果想要在生成的标签内部写内容可以用 { } 表示

<!--div{这是一个div标签}*3-->
    <div>这是一个div标签</div>
    <div>这是一个div标签</div>
    <div>这是一个div标签</div>
<!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

快速生成CSS样式语法

CSS 基本采取简写形式即可
比如 w200 按tab 可以生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;

感觉ide自带的提示功能很强大了，除了常用的几个样式，不太便于记忆

css的复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器 (重要）

定义：
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：

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

语法说明：

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后代选择器</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink */
        ol li {
            color: pink;
        }
        /* 中国 山东 济南 蓝翔 */
        ol li a {
            color: red;
        }
        .nav li a {
            color: yellow;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li><a href="#">我是第二个ul的孙子</a></li>
    </ul>
</body>
</html>

子选择器（重要）

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

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

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。

语法说明：

元素1 和元素2 中间用大于号隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是元素1 的下一级(亲儿子)，除了元素1 下一级的元素都不能被选到。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素选择器</title>
    <style>
        .nav > a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <!--使用子元素选择器，这一层a标签无法被选择-->
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>
</html>

并集选择器 (重要）

定义：

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

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

上述语法表示选择元素1 和元素2。

语法说明：

元素1 和元素2 中间用逗号隔开
并集选择器通常用于集体声明

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>并集选择器</title>
    <style>
        /* 要求1: 请把大毛和二毛改为红色 */
        /* div,
        p {
            color: red;
        } */

        /* 要求2: 请把大毛、二毛和所有英雄改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 约定的语法规范,并集选择器喜欢竖着写 */
    </style>
</head>
<body>
    <div>大毛</div>
    <p>二毛</p>
    <span>毛熊</span>
    <ul class="hero">
        <li>龙骑士</li>
        <li>幻影刺客</li>
        <li>钢背兽</li>
    </ul>
</body>
</html>

伪类选择器

定义：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

语法：
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child、:last-child、:nth-child(n) 。

链接伪类选择器

主要对超链接进行样式修改，链接选择器主要有以下四种：

a:link 没有点击过的(访问过的)链接
a:visited 点击过的(访问过的)链接
a:hover 鼠标经过的那个链接
a:active 鼠标正在按下还没有弹起鼠标的那个链接
举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: pink;
            text-decoration: none;/*去掉链接下划线*/
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">这是一个神奇的链接</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

链接伪类选择器注意事项
为了确保生效，链接伪类选择器需要按照 LVHA 的循顺序声明
:link {}
:visited {}
:hover {}
:active {}。

小技巧： lv 包包 hao 。

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接伪类选择器的样式</title>
    <style>
        body {
            color: red;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="http://www.xxxxxxxx.com">未知网站</a>
</body>

</html>

:focus 伪类选择器

定义：

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="password">
    <input type="text">
</body>
</html>

浏览器效果：
在这里插入图片描述

复合选择器总结

选择器	作用	特征	使用情况	隔开符合与特征
后代选择器	用来选择后代元素	可以是子代，也可以是子代的子代	多	以空格隔开 .div a
子代选择器	选择子代元素	只能选择子代元素	少	符号是> ul>li
并集选择器	选择相同样式的元素	用于集体声明	多	符号是逗号 div,p
链接伪类选择器	选择不同状态的链接	与链接相关	多	注意实际开发中链接中链接伪类选择器的用法
:focus选择器	选择获得光标的表单	表单相关	少	input:focus {}

css的显示模式

元素显示模式就是元素（标签）以什么方式进行显示，如在浏览器中<div>自己占一行，一行可以放多个<span>标签。

作用：

为了更好的布局网页。

元素显示模式分为块元素、行内元素和行内块元素。

块元素

常见的块元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

<div> 标签是最典型的块元素。

块级元素的特点：

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

注意：

文字类的元素内不能放块级元素

<p> 标签和<h1>~<h6>等都是文字类块级标签，主要都是用于存放文字，因此它们不能放块级元素。

行内元素

常见的行内元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。

注意：
链接里面不能再放链接
链接标签<a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

行内块元素

常见的行内块标签：

<img />、<input />、<td>

它们同时具有块元素和行内元素的特点。

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	可包含内容
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置高度宽度	本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度高度	本身内容的宽度

元素显示模式的转换

简单理解:

一个模式的元素需要另外一种模式的特性，比如想要增加链接 <a> 的触发范围。

转换方式

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素显示模式转换</title>
    <style>
        a {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">一个很大的块链接</a>
    <a href="#">一个很大的块链接</a>
</body>

</html>

浏览器效果：
在这里插入图片描述

单行文字垂直居中的代码

解决方案:

让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中

<style>
        div {
            width: 200px;
            height: 40px;/*盒高*/
            background-color: pink;
            line-height: 40px;/*让文字的行高等于盒子高度*/
        }
    </style>

简单理解:
行高的上空隙和下空隙把文字挤到中间了，
如果行高小于盒子高度,文字会偏上，
如果行高大于盒子高度,则文字偏下。
在这里插入图片描述

css的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

样式名称：

background-color 定义元素的背景颜色

使用方式：

background-color:颜色值

其他说明：

元素背景颜色默认值是 transparent（透明）

背景图片

样式名称：

background-image 定义元素的背景图片

使用方式：

background-image:url(url);

<style>
        div {
            width: 300px;
            height: 300px;
            background-image: url(images/logo.png);
        }
    </style>

其他说明：

background-image的参数可以是none，如果是none，那么会设置为无背景。
实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 因为便于控制位置。
背景图片后面的地址，千万不要忘记加 URL，同时里面的路径不需要加引号。

背景平铺

样式名称：

background-repeat 设置元素背景图像的平铺

使用方式：

background-repeat:repeat | no-repeat |  repeat-x |  repeat-y;

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

背景图片位置

样式名称：

background-position 属性可以改变图片在背景中的位置

使用方式：

background-position:x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位

参数值	作用
length 精度单位	百分数或由浮点数字和单位标识符组成的长度值
position 方位名词	top center bottom left right top 方位名词

方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

精度单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            /* 20px 50px; x轴一定是 20  y轴一定是 50 */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */
            background-position: 20px;

        }
</style>

混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

背景图片固定

样式名称：

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

使用方式：

background-attachment:scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixed	背景图像固定

其他说明：
background-attachment 后期可以制作视差滚动的效果。

背景样式合写

背景合写样式：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

使用方式：

<style>
        body {
            /*background-color: black;*/
            /*background-image: url(images/bg.jpg);*/
            /*background-repeat: no-repeat;*/
            /*background-position: center top;*/
            /* !*把背景图片固定住 *!*/
            /*background-attachment: fixed;*/
            
            /*上面注释的内容与下面合写的效果是一样的*/
            background: black url(images/bg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
</style>

背景色半透明

CSS3 提供了背景颜色半透明的效果。

使用方式：

background: rgba(255, 255, 0, .3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(255, 255, 0, .3);
前面的三个参数是颜色的rgb格式

注意：

背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景总结

属性	作用	写法
background-color	背景颜色	预定义颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	方位或精度单位，标注x，y的位置
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
背景简写		background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;
背景色半透明		background: rgba(255, 255, 0, .3);

大巴黎咚咚咚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础学习二

文章目录emmet语法快速生成html结构快速生成CSS样式语法css的复合选择器后代选择器 (重要）子选择器（重要）并集选择器 (重要）伪类选择器链接伪类选择器:focus 伪类选择器复合选择器总结css的显示模式块元素行内元素行内块元素元素显示模式总结元素显示模式的转换单行文字垂直居中的代码css的背景背景颜色背景图片背景平铺背景图片位置背景图片固定背景样式合写背景色半透明背景总结感谢黑马培训提供的学习资料emmet语法Emmet语法的前身是Zen coding,它使用缩写来提高html/css的
复制链接

扫一扫