CSS学习2

最新推荐文章于 2024-10-04 22:03:04 发布
最新推荐文章于 2024-10-04 22:03:04 发布
阅读量363 收藏
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58383878/article/details/124364403
版权

CSS

1、Emmet语法

1.1快速生成HTML结构语法

​ 1.如果要生成多个相同标 签 加上*数字就可以了

如div*3 就可以快速生成3个div

  1. 如果有父子级关系的标签，可以用>，比如 ul>li 就可以了
  2. 如果有兄弟关系的标签，用+就可以了 比如div+p
  3. 如果想带有类目或者id名字的，直接写 .demo 或者 #two 就可以了（默认div，不想用div可以用 p.demo 或者 span.demo ）
  4. 如果div类名是有顺序的，可以用自增符号$
  5. 如果想要在生成的标签内部写内容可以用 {} 表示

1.2快速生成CSS样式

​ 直接写单词每个字母缩写，如text-align: center; = tac;

1.3快速格式化代码

​ shift+alt+f 也可右键 选中

二、CSS 的复合选择器

复合选择器可以更准确、更高效的选择目标元素（标签）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

1.后代选择器（重要）

空格隔开父亲和子类

把ol中的li选出来改为red

    <style>
        ol li {
            color: red;
        }
    </style>
	<ol>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ol>
    <ul>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>

把外标签写在前面，内标签写在后面，用空格隔开，可以一直往下查，可以用class给标签取名，用名字往下传递

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

2.子元素选择器（重要）

大于> 父亲>子类

只选择最近的一级子元素（亲儿子）

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

    <style>
        ol div {
            color: red;
        }
    </style>
    <ol>
        <div>1</div>
        <li>1</li>
        <li>1</li>
        <li>
            <div>1</div>
        </li>
    </ol>

全红

    <style>
        ol>div {
            color: red;
        }
    </style>
    <ol>
        <div>1</div>
        <li>1</li>
        <li>1</li>
        <li>
            <div>1</div>
        </li>
    </ol>

只有第一个红

3.并集选择器

逗号 兄弟1，兄弟2

div, 
p {
	color: red;
}

用逗号分开，里面可以写后代选择器

4.伪类选择器

a:link 选择所有未被访问的链接（没有点击过的）

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

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

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

    <style>
        /* a:link 没有点击（访问过的）链接 */
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* a:visited 选择点击过（访问过的）的链接 */
        a:visited {
            color: orange;
        }
        /* a:hover 选择鼠标进过的那个链接 */
        a:hover {
            color: skyblue;
        }
        /* a:active 选择的是我们鼠标正在按下没有弹起的链接 */
        a:active {
            color: green;
        }
    </style>
<body>
    <a href="#">1111</a>

</body>

1、为确保生效，请按照LVHA的顺序声明 :link - :visited - :hover - :active。

2、因为a链接在游览器中具有默认样式，所以需单独指定样式，写在body {}里的无法起作用。

3、实际开发中一般是

a {
	color: gray;
}
a:hover {
	color: skyblue;
	text-decoration: underline;
}

5、focus选择器

把鼠标选中的input表单选取出来

<style>
        /* 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: red;
        }
</style>
<body>
    <input type="text">
</body>

三、CSS的元素显示模式

HTML元素一般分为块元素（一行只放一个）和行内元素（一行放好多个）两种类型

1、块元素

有

<h1> - <h6>、 <p>、 <div>、 <ul>、 <ol>、 <li>等， <div>是最典型的块元素

块元素特点

  • 比较霸道，独占一行
  • 高度宽度，外边距和内边距都可以控制
  • 宽度默认是容器的100%
  • 是一个容器及盒子，里面可以放行内或块级元素

注意

  • 文字类的元素内不能使用块级元素
  • p 标签主要用于存放文字，因此 p 里不能放块级元素，特别是不能放 div
  • 同理，h1 - h6 等都是文字类块级标签，里面也不能放其他块级元素

2、行内元素

有

<a>、 <strong>、 <b>、 <em>、 <i>、 <del>、 <s>、 <ins>、 <u>、 <span>等，其中<span>是最典型的行内元素，有些地方也将其称为内联元素

行内元素的特点：

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

注意

  • 链接里面不能再放链接
  • 特殊情况链接 a 里面可以放块级元素，但是给 a 转换一下块级模式最安全

3、行内块元素

在行内元素有几个特殊标签——img、input、td，同时具有块元素和行内元素

特点

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

4、元素显示模式转换

1.把行内元素转换为块级元素，display: block;

<style>
    a {
		width: 150px;
        height: 50px;
        background-color: red;
        display: block;		//重点
    }
</style>

2.把块级元素转换为行内元素，display: inline;

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

5、单行文字垂直居中的代码

1.让文字的行高等于盒子的高度！！

使得line-height = height；

2.文字居中原理

盒子高度40，文字本身高度加上空隙和下空隙等于40，正好居中；即上空隙和下空隙把文字挤到中间了，如果行高大于盒子高度，文字偏上，反之偏下。

五、实战1（小米侧边栏）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            height: 40px;
            line-height: 40px;
            width: 230px;
            font-size: 14px;
            text-indent: 2em;
            text-decoration: none;
            color: white;
            background-color: rgb(83, 87, 88);
            display: block;
        }
        a:hover {
            background-color: rgb(255, 111, 0);
        }
    </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>

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

六、CSS的背景

1、背景颜色

background-color: 颜色值 or transparent（透明）

2、背景图片

1.背景图片

background-image属性描述了元素的背景图像，实际开发中常见于logo或者一些装饰性的小图片或者超大背景图片，优点是非常便于控制位置

background-image: none 或者

background-image: url(图片文件地址);

2.背景平铺

使用background-repeat: no-repeat; //不平铺

background-repeat: repeat; //平铺（默认）

background-repeat: repeat-x; //沿着x轴平铺

background-repeat: repeat-y; //沿着y轴平铺

注意：背景图片会压住背景颜色

3、背景图片的位置

background-position: x y;

可以使用方位名词或者精确单位

1.方位名称：

top|center|bottom|left|center|right

  • 若后两个词都是方位名词，则与顺序无关系，如top right = right center

  • 若只有一个方位名词，则另一个默认center

2.精确单位

第一个x，第二个y，单位px；

如果只有一个数值默认x，另外一个默认center

3.混合单位

一个方位名词，一个精确单位

4.适应屏幕最大

background-size: cover;

4、背景图像的固定

background-attachment:

scroll 背景图片是随对象内容滚动（默认）

fixed 背景图像固定

5、背景符合写法

合并写在一个属性background中，从而节约代码（实际开发提倡的）

此简写没有特定书写顺序，一般习惯约定顺序为：

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

background: transparent url(image.jpg) no-repeat fixed top;

6、背景半透明

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

background: rgba(0, 0, 0, 0.3); r对应红色，g对应绿色，b对应蓝色，a对应透明度，取值在0-1之间，一般习惯把 0 省掉，直接写 .3。

只是让盒子背景颜色半透明，盒子里面的内容不受影响

七、实战2（成长守护平台logo）

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-color: aliceblue;
            background-image: url(icon.png);
            background-repeat: no-repeat;
            text-indent: 1.5em;
            background-position: center left;
        }
    </style>
</head>
<body>
    <h3>成长守护平台</h3>
</body>
</html>

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

八、实战3（五彩导航栏）

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            background-color: skyblue;
            width: 120px;
            height: 58px;
            text-align: center;
            text-decoration: none;
            color: white;
            line-height: 48px;
        }
        .bj1 {
            background-image: url(images/bg1.png);
            background-repeat: no-repeat;
        }
        .bj2 {
            background-image: url(images/bg2.png);
            background-repeat: no-repeat;
        }
        .bj3 {
            background-image: url(images/bg3.png);
            background-repeat: no-repeat;
        }
        .bj4 {
            background-image: url(images/bg4.png);
            background-repeat: no-repeat;
        }
        /* a链接的名字后面:hover也可以使用 */
        .bj1:hover {            
            background-image: url(images/bg11.png);
            background-repeat: no-repeat;
        }
        .bj2:hover {
            background-image: url(images/bg22.png);
            background-repeat: no-repeat;
        }
        .bj3:hover {
            background-image: url(images/bg3.jpg);
            background-repeat: no-repeat;
        }
        .bj4:hover {
            background-image: url(images/bg5.png);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" class="bj1">五彩导航</a>
        <a href="#" class="bj2">五彩导航</a>
        <a href="#" class="bj3">五彩导航</a>
        <a href="#" class="bj4">五彩导航</a>
    </div>
</body>

</html>

效果：

在这里插入图片描述
（原始的）
在这里插入图片描述
（鼠标放在第二个上，四个鼠标放上都有效果）

CC_XX1
关注
HTML和Css的学习
SYX_lh的博客
10-19 4244
学习HTML和Css
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习
m0_55471400的博客
06-27 1608
css全称：层叠样式表用来美化页面。
CSS学习路线
警警的博客
09-15 1362
CSS学习路线涵盖了从基础到进阶再到深入探索的各个阶段，每个阶段都有其特定的学习内容和面试中常见的题目。通过系统地学习和实践，你可以逐步掌握CSS的核心技能，并在面试中展现出自己的专业能力和实践经验。
CSS基础学习
weixin_68705721的博客
03-31 1725
HTML标签 属性：网页的内容HTML：网页的内容CSS：内容的样式可以实现内容和样式相分离，便于修改样式。2.CSS语法字号color:blue;文字颜色加粗注意：a.要把它们放在p{}（选择器）里b.后面的是属性值，别忘记加分号。
HTML+CSS学习总结
weixin_53351919的博客
06-26 2912
html+css学习总结
CSS学习心得
weixin_47223561的博客
03-30 2104
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
CSS学习笔记
Curry_On的博客
10-26 2329
CSS学习笔记 本文根据B站pink老师视频整理，供复习参考 笔记内容（更新中）：
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2430
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS和HTML学习心得体会
w_pig的博客
07-10 2533
学习心得
CSS 学习心得
12-09
不论页面的问题大小都统统交给他们解决，这样不仅影响了自己的工作效率，还给UED的同事带去不少麻烦，正好这几天工作不是很紧张，在http://www.w3school.com.cn/index.html网站上浏览了一些关于CSS的资料，感觉CSS比...
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
html+css学习.zip
01-01
html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习...
HTML和CSS学习.zip
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
CSS-Day3
m0_74039531的博客
09-29 343
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 351
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
【CSS】position
小秀的博客
10-02 292
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
深入浅出 CSS 定位：全面解析与实战指南
最新发布
2301_79175212的博客
10-04 744
在当今互联网时代，网页设计不仅需要具备美观的视觉效果，还需确保用户体验的流畅与便捷。而实现这一目标的关键，往往隐藏在细节之中。CSS（层叠样式表）作为前端开发的重要组成部分，其定位（Positioning）机制在布局设计中扮演着至关重要的角色。无论你是初涉前端世界的新手，还是希望提升技能的开发者，掌握 CSS 定位的各种技巧与应用，无疑会为你的网页设计增色不少。本文将以通俗易懂的语言，详细解析 CSS 定位的各类属性，并通过实际案例，助你轻松驾驭这一强大工具。CSS 定位允许你控制 HTML 元素在页面上的
HTML与CSS基础学习指南
"HTML和CSS是构建网页的基础，本学习笔记主要涵盖了HTML的基本概念、结构、标签语法以及常用标签的介绍。HTML是超文本标记语言，通过标签定义网页内容和结构，如<!DOCTYPEhtml>用于声明文档类型，是根元素，包含元...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值