CSS基础学习第二天

1.emmet语法

1)快速生成HTML结构语法

---标签名+tab键即可生成标签

---标签+*+数量即可生成多个标签

---如果有父子级关系的标签,用>,比如ul>li+tab键

---如果有兄弟级的标签,用++tab键

---如果生成带有类名或者id名字的,直接写.demo/#demo +tab键

---如果生成的div类名是有顺序的,用自增符号$

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

2)快速生成CSS样式语法

基本采用简写形式。

css 复制代码
<style>
        .one{
            text-align: center;   /* tac+tab可以快速生成 */
	        text-indent: 2px;   /* ti2+tab可以快速生成 */
	        width: 100px;    /* w100+tab可以快速生成 */
	        height: 200px;   /* h200+tab可以快速生成 */
	        line-height: 26;  /* lh26+tab可以快速生成 */
        }
    </style>

2.CSS复合选择器

1)后代选择器
html 复制代码
<ol>
        <li>卷卷卷</li>
        <li>卷卷卷</li>
        <li>卷卷卷</li>
    </ol>
    <ul>
        <li>卷卷卷</li>
        <li>卷卷卷</li>
        <li>卷卷卷</li>
    </ul>

将ol中的小li设置样式,标签、类选择器显然不行,此时用到我们的后代选择器。

语法:元素1+空格+元素2+空格+{样式声明}

元素1和元素2必须用空格隔开,元素1必须是父级,元素2必须是后代,最终选择的是元素2

css 复制代码
<style>
        ol li {
            color: red;
        }
    </style>
html 复制代码
<ol>
        <li>卷卷卷</li>
        <li>卷卷卷</li>
        <li><a href="#">卷卷卷</a></li>
    </ol>
css 复制代码
<style>

        ol li a {
            color: red;
        }
    </style>
2)子选择器

---只能选择作为某元素的最近一级子元素

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

3)并集选择器

---可以选择多组标签,同时为他们定义相同的样式。用英文逗号,分隔。

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

4)伪类选择器

---用 **:**表示

(1)链接伪类选择器

---a:link选择所有还没有被访问的链接的样式

---a:hover选择鼠标指针位于其上的链接

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

---a:active选择活动链接(鼠标按下没有弹起的链接)

html 复制代码
<body>
    <a href="#">2025</a>
</body>
css 复制代码
<style>
        /* 没有访问的链接 */
        a:link {
            color: black;
            text-decoration: none;
        }
        /* 选择点击过的链接 */
        a:visited {
            color: blue;
        }
        /* 选择鼠标经过的那个链接,没有点击 */
        a:hover {
            color: yellow;
        }
        /* 选择鼠标按下没有弹起的链接 */
        a:active {
            color :green;
        }
    </style>

书写时注意:按照LVHA的顺序写,即link、visited、hover、active。链接单独指定样式。

(2):focus伪类选择器

---用于选择获得焦点的表单元素。焦点就是光标。一般情况<input>类表单元素才能获取,因此这个选择器主要针对与表单元素。

html 复制代码
<input type="text">
    <input type="text">
    <input type="text">
css 复制代码
<style>
        /* 把获得光标的表单元素选择出来 */
        input:focus{
            background-color: red;
        }
    </style>
复合选择器总结

3.CSS的元素显示模式

---元素分为块元素和行内元素

1)块元素

特点:

1.独占一行

2.可以设置高度、宽度、内外边距

3.宽度默认是容器的宽度

4.是容器,里面可以放行内或者块级元素

注意:文字类的元素内不能使用块级元素,<p>标签主要用于存放文字,因此p里面不能放块级元素,特别不能放div,同理h1~h6也不能放块级元素。

2)行内元素(内联元素)

特点:

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

2.高、宽设置是无效的。

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

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

注意:链接里面不能再放链接;特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全

3)行内块元素

eg:<img/>、<input/>、<td>同时具有块元素和行内元素的特点

特点:

1.和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个。

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

3.高度、行高、内外边距可以控制。

4)元素显示模式总结
5)显示模式转换

转换为块元素:display:block;

css 复制代码
<style>
        a {
            width: 150px;;
            height: 50px;
            background-color: pink;
            display:block;
        }
    </style>
html 复制代码
<body>
    <a href="#">2025</a>
</body>

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

css 复制代码
<style>
        div {
            width: 300px;
            height: 100px;
            background-color: green;
            display:inline;
        }
    </style>
html 复制代码
<body>
    <div>2025</div>
    <div>2025</div>
</body>

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

css 复制代码
<style>
        span {
            width: 100px;
            height: 30px;
            background-color: green;
            display: inline-block;
        }
    </style>
html 复制代码
<body>
    <span>2025</span>
    <span>2025</span>
</body>

单行文字垂直居中:让文字的行高等于盒子的高度

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单版侧边栏</title>
    <style>
        a {
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-style: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
            display: block;
        }

        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 : transparent(透明的) | color

2)背景图片

优点:便于控制位置

语法:background-image : none | url (url)

注意:这里的url()不要丢掉

3)背景平铺

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

背景图片默认是平铺的,其中,no-repeat:不平铺,repeat-x:沿x轴平铺,repeat-y:沿y轴平铺

4)背景图片位置

语法:background-position: x y;

可以使用方位名词或者精确单位,如果是方位名词,跟顺序无关,center left和left center效果相同,如果只写一个,那么另一个默认是center。如果背景图片位置是精确位置,那么第一个肯定是x坐标,第二个肯定是y坐标。如果参数只写一个值,那肯定是x的值,另一个默认垂直居中。方位名词和精确单位可以混合使用,第一个肯定是x坐标,第二个肯定是y坐标。

5)背景图像固定(背景附着)

background-attachment属性设置背景图像设置图像是否固定或者随着页面的其余部分滚动。可以制作视差滚动的效果。

语法:background-attachment : scroll | fixed

6)背景复合写法

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

7)背景色半透明

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

最后一个参数是alpha透明度,取值范围在0~1之间。CSS3新增属性,是IE9+版本浏览器才支持的

8)总结

5.CSS的三大特性

层叠性、继承性、优先级。

1)层叠性

相同选择器设置相同的样式,此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。

原则:样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式;样式不冲突,不会层叠。(后来者居上)

2)继承性

子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。可以简化代码,降低CSS样式的复杂性。

html 复制代码
<!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>
        div {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <p>2025</p>
    </div>
</body>

</html>

此时p标签中的内容为蓝色。

行高的继承

font:字体大小/相对行高,这里的1.5是指字体大小的1.5倍

css 复制代码
font: 15px/1.5 'Microsoft YaHei';

若上述代码是父标签的字体属性且子标签设置了字体大小,则子标签会继承父标签的行高,即子标签行高为子标签字体大小的1.5倍。

3)优先级

当同一个元素指定多个选择器,就会有优先级的产生。

若选择器相同,则执行层叠性。

选择器不同,则根据选择器权重执行。

css 复制代码
<style>
        div {
            color: blue!important;
        }

        .nav {
            color: red;
        }
        #demo {
            color: pink;
        }

    </style>
html 复制代码
<body>
    <div class="nav" id="demo" style="color:yellow">2025</div>
</body>

优先级注意点:权重是有4组数字组成,但是不会有进位;继承的权重是0;从左到右比较大小。

权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。

css 复制代码
<style>
        /* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 */
        ul li {
            color: red;
        }
        /* li 的权重0,0,0,1 */
        li {
            color: blue;
        }
    </style>
html 复制代码
<body>
    <ul>
        <li>2025</li>
        <li>2024</li>
        <li>2023</li>
    </ul>
</body>

因此li标签中应为红色。

相关推荐
Zayn6 小时前
前端路径别名跳转和提示失效?一文搞懂解决方案
前端·javascript·visual studio code
葡萄城技术团队6 小时前
【SpreadJS V18.2 新特性】Table 与 DataTable 双向转换功能详解
前端
Nicholas_ly6 小时前
copilot
前端
Chosen_16 小时前
CSS大汇总
css
__M__6 小时前
Zalo Mini App 初体验
前端·react.js
xianxin_6 小时前
CSS Pseudo-elements(伪元素)
前端
Bacon6 小时前
RBAC 角色权限模型
前端
卡卡_罗特6 小时前
前端项目部署nginx代理
前端·vue.js·nginx