前端自学7——CSS进阶

whfdcd！

于 2024-08-19 16:35:58 发布

阅读量738

点赞数 13

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_57364534/article/details/141329062

版权

1.Emmet语法

1.快速生成html结构语法

1.生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>

2.如果想要生成多个相同标签加上*就可以了比如div*3 就可以快速生成了3个div

3.如果有父子级关系的标签，可以用>比如ul>li就可以了

4.如果有兄弟关系的标签，用+就可以了比如div+p

5.如果生成带有类名或者id名字的，直接写.demo（类）或者#demo（id）再按 tab键就可以了，都是默认div标签下，其他可以是p.red 、span.one、ul>li#red

6.如果生成的div类名是有顺序的，可以用自增符号$( .demo$*3)

7.如果想要在生成的标签内部写内容可以是div{}，写在{}中再按tab键，多个带顺序：div{小卖部$}*3

2.快速生成css样式语法

css基本采取简写形式即可。

1. 比如w200按tab 可以生成width:200px;

2.比如 lh26 按tab 可以生成 line-height:26px；

以此类推，都可以用单词第一个字母代替

2.CSS的复合选择器

建立在基础选择器之上，对基础选择器进行组合

常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等

1.后代选择器（多）

又称包含选择器

元素1是父标签，元素2 是元素1的后代即可，元素1 可以是任意基础选择器

语法格式：

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

/* 把ol中的li改为pink */
        ol li {
            color: pink;
        }
        /* 把ol中li中的a改为red */
        ol li a {
            color: red;
        }

2.子选择器（少）

只能选某元素的最近一级子元素

语法：元素1>元素2{样式声明}，1是父级，2是子级，div>p{}

3.并集选择器（多）

可以选择多组标签，同时为他们定义相同的样式，通常用于集体说明，任何选择器都可作为选择器的一部分，竖着写，最后一个选择器不要加逗号

div,
p {
  color: pink;
}

4.伪类选择器

向某些选择器添加特殊效果，如给链接添加特殊效果，或选择第一个，第n个元素

用冒号（:）表示，如:hover、:first-child

1.链接伪类选择器（多）

a:link 选择所有未被访问的连接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标点击的链接

a:active 选择活动链接（鼠标按下未弹起的链接）

要按以上四个固定顺序：love hate

实际开发写法：

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

a:hover {
  color: blue;
  text-decoration: underline;
}

2.:focus伪类选择器（少）

选取获得焦点的表单元素，焦点就是光标，一般情况下<input>类表单元素才能获取，此选择器主要针对于表单元素来说

input:focus {
  background-color: pink;
  color: red;
}

3.CSS的元素显示模式

1.块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

1.比较霸道，自己独占一行。

2.高度，宽度，外边距双内边距都可以控制。

3.宽度默认是容器（父级宽度）的100%.

4.是一个容器及盒子，里面可以放行内或者块级元素。

注意：

1.文字类的元素内不能使用块级元素

2.<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>

3.同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

2.行内元素

常见的行内元素有<a>、<strong>,<b>、<em>,<i>、<del>、<s>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

1.相邻行内元素在一行上，一行可以显示多个。

2.高，宽直接设置是无效的。

3.默认宽度就是它本身内容的宽度。

4.行内元素只能容纳文本或其他行内元素。

注意：

链接里不能再放链接

<a>可以放块级元素

3.行内块元素

在行内元素中有几个特殊的标签一<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

行内块元素的特点：

1.和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝腕，一行可以显示多个（行内元索特点）

2.默认宽度就是它本身内容的宽度（行内元素特点）

3.高度，行高，外边距以及内边距都可以控制（块级元素特点）

4.元素显示模式转换（开发常用）

如：增加<a>触发范围

转换为块元素：display:block;

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

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

5.截图工具

snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上，

常用快捷方式：

1.f1可以截图。同时测量大小，设置箭头书写文字等

2.f3在桌面置顶显示

3.点击图片，alt可以取色 (按下shift可以切换取色模式）

4.按下esc取消图片显示

6.侧边栏案例

案例的核心思路分为两步：

1.把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度。

2.鼠标经过a给链接设置背景颜色

css未提供文字垂直居中的代码

解决方案：让文字的行高等于盒子的高度height=line-height

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边栏</title>
    <style>
        /* 1.把a转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }

        /* 2.鼠标经过a给链接设置背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

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

</html>

4.CSS的背景

1.背景颜色

background-color，一般默认透明

2.背景图片

background-image

参数值：none，无背景图（默认）；url，绝对或相对地址指定背景图片

3.背景平铺

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

4.背景图片位置（重点）

background-position:x y;

x,y坐标，可以使用方位名词（top，center，bottom）或者精确单位

1.参数是方位名词

前后两词顺序无关background-position: center right;

若只指定了一个方位名词，则第二个之默认居中对齐

2.参数是精确单位

第一个必是x坐标，第二个必是y坐标

如果只指定一个，数值一定是x，另一个默认center

3.混合单位

有顺序关系，第一个是x，第二个是y

5.背景图像固定（背景附着）

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

background-attachment后期可以制作视差滚动的效果。

语法：

background-attachment:scroll / fixed

scroll：背景随对象内容滚动

fixed：背景固定

6.背景复合写法

无特定书写顺序，一般习惯约定顺序为：

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

background: #000 url(image/元流之子背景.jpg) no-repeat fixed center top;

7.背景色半透明

语法
background:rgba(0,0,0,0.3)

最后一个参数是alpha透明度，取值范围在0~1之间（1 不透明）

可以直接写.3

盒子背景色半透明，盒子内容不受影响

可继承text-，font-，line-,等，以及color属性

行高的继承

font:12px/1.5 'microsoft yahei'，

12px（字体大小）

1.5（行高，当前文字大小的1.5倍，也可指定具体大小：1234px）

3.优先级

当同一个元素指定多个选择器，就会有优先级的产生。根据选择器权重选择

可以简单记忆法：通配符和继承权重为0,标签选择器为1.类伪类伪类选择器为10,id选择器100,行内样式表为1000，！important无穷大。

继承的权重是0,如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。优先执行被选出来的

权重叠加（重要）

复合选择器会有权重叠加问题，但是权重不会有进位，只有累加

如：ul li权重大于li，.nav li权重大于ul li，也大于li

li的权重为0,0,1,0

ul li权重为0,0,0,1+0,0,0,1=0,0,0,2

.nav li权重为0,0,1,1+0,0,0,1=0,0,1,1

whfdcd！

关注

13
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前端自学7——CSS进阶

常见的行内元素有<a>、<strong>,<b>、<em>,<i>、<del>、<s>、<span>等，其中<span>标签是最典型的行内元素。在行内元素中有几个特殊的标签一<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。可以选择多组标签，同时为他们定义相同的样式，通常用于集体说明，任何选择器都可作为选择器的一部分，竖着写，最后一个选择器不要加逗号。常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素。
复制链接

扫一扫