CSS

最新推荐文章于 2024-09-10 18:37:52 发布
最新推荐文章于 2024-09-10 18:37:52 发布
阅读量167 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45632660/article/details/108023669
版权

CSS

css发展史

CSS1.0

CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简答,SEO

CSS2.1 浮动,定位

CSS3.0 圆角,阴影,动画… 浏览器兼容性

CSS快速入门

# 基本入门
# 规范: <style> 可以编写css代码,最好写在head里面
# <style> 里面的 h1 是标签名选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
   
   <h1>我是标题</h1>
</body>
</html>

在这里插入图片描述

# link 引入css样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <link rel="stylesheet" href="../style.css"></link>
</head>
<body>
   
   <h1>我是标题</h1>
</body>
</html>

在这里插入图片描述在这里插入图片描述

CSS的优势

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于html 的css样式

5、利用SEO，容易被搜索引擎收录!

三种CSS导入方式

第一种

# 行内样式: 在标签元素中，编写一个style属性,编写样式即可
<h1 style="color: blue;">余香</h1>

在这里插入图片描述

第二种

# 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        h1{
            color: brown;
        }
    </style>
</head>
<body>
   <h1>余香</h1>
   
</body>
</html>

在这里插入图片描述

第三种

# 外部样式
# link引入在其它地方别写的css样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <link rel="stylesheet" href="../style.css"></link>
</head>
<body>
   <h1>余香</h1>
   
</body>
</html>

# 引入的css样式
h1{
    color: aqua;
}

在这里插入图片描述

三种方式采用的优先级

# 优先级: 行内样式>内部样式>外部样式
# 就近原则
# 哪个样式离标签近就先用哪个

三种基本选择器

作用: 选择页面上的某一个或者某一类元素

基本选择器

标签选择器

在这里插入图片描述

类选择器
# 好处，可以多个标签归类，是同一个class，可以复用

在这里插入图片描述

id选择器
# 全局唯一，不可复用

在这里插入图片描述

总结

1.id选择器>类选择器>标签选择器

2.类选择器前面记得加 .

3.id选择器前面记得加 #

4.类选择器 可以多个标签归类，是同一个class，可以复用

5.id选择器 全局唯一 不可复用

6.标签选择器可以复用,但是当同一个标签想使用别的样式就不可以,此时可以用类选择器,根据类名选择.

层级选择器

了解，会用即可

1.后代选择器: 在某个元素的后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        body h1 {
            color: pink;
        }
    </style>
</head>
<body>
   <h1 >余香</h1>
   <h1 >余香</h1>
   <h1 >余香</h1>
   <p>哈哈</p>

</body>
</html>

2.子选择器,一代

# 就是在某一个标签的里面 爸爸和儿子的关系
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        li>p {
            color: pink;
        }
    </style>
</head>
<body>
    <li>
        <p>张三</p>
        <p>李四</p>
    </li>

</body>
</html>

3.相邻兄弟选择器

# 相同标签的下一个显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        .yu+p {
            color: pink;
        }
    </style>
</head>
<body>
    <li>
        <p class="yu">张三</p>
        <p>李四</p>
    </li>

</body>
</html>

4.通用选择器

# 相同标签下下面所有都显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        .yu~p {
            color: pink;
        }
    </style>
</head>
<body>
    <li>
        <p class="yu">张三</p>
        <p>李四</p>
        <p>李四</p>
        <p>李四</p>
        <p>李四</p>
    </li>

</body>
</html>

结构伪类选择器

了解

# 选中li标签里面第一个元素 first-child
# 选中li标签里面最后一个元素 last-child
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
       li p:first-child{
           color: red;
       }
       li p:last-child{
           color: pink;
       }
    </style>
</head>
<body>
    <li>
        <p>张三</p>
        <p>李四</p>
        <p>李四</p>
        <p>李四</p>
        <p>李四</p>
    </li>

</body>
</html>

在这里插入图片描述

属性选择器(常用)

# 通过标签查找匹配的选择器并显示，其他属性匹配也可以 例如: a[href="h.jpg"]
# = 等于
# *= 通配  匹配所有
# ^= 匹配以什么为开头
# $= 匹配以什么为结尾
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
       p[id=first] {
           color: red;
       }
    </style>
</head>
<body>
  <p class="item last" id="first">张三</p>
  <p class="item">张三</p>
  <p class="item last">张三</p>
  <p class="item last">张三</p>
  <p class="item last">张三</p>
  <a href="h.jpg" target="_blank">点击</a>

</body>
</html>

在这里插入图片描述

美化网页元素

为什么要美化网页

1.有效的传递页面信息

2.美化网页、页面漂亮、才能吸引用户

3.凸显页面的主题

4.提高用户的体验

span标签: 重点要突出的子,使用span套起来，就是一个约定.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        #first{
            font-size: 50px;
        }
    </style>
</head>
<body>
    欢迎学习<span id="first">java</span>

</body>
</html>

在这里插入图片描述

字体样式

# font-familt: 字体类型
# font-size: 字体大小 px像素 em缩进 ....
# font-weight: 字体粗细
# color: 颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        p[id=first]{
            font-family: fantasy;
            font-size: 50px;
            font-weight: bold;
        }
    </style>
</head>
<body>
   <p id="first">哈哈哈哈哈哈哈哈哈</p>

</body>
</html>

在这里插入图片描述

文本样式

# text-aglin: 排版
# text-indent: 段落首行缩进
# line-height: 行高
#  text-decoration: underline : 下划线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        p[id=first]{
           /* text-align: center; */
           text-indent: 2em;
           line-height: 200px;
           text-decoration: underline;
        }
    </style>
</head>
<body>
   <p id="first">哈哈哈哈哈哈哈哈哈</p>

</body>
</html>

在这里插入图片描述

文本阴影和超链接伪类

# text-decoration: none 取消下划线
# hover 鼠标悬浮的状态
# active 鼠标按住未释放的状态
# text-shadow 阴影
<!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{
           text-decoration: none;
       }
       a:hover{
           color: red;
           font-size: 50px;
       }
       a:active{
           color: rosybrown;
       }
       p[id=first]{
           text-shadow: violet 10px 10px 10px;
       }
    </style>
</head>
<body>
  <a href="#">Java开发首次</a>
  <p id="first">C++技术实战</p>
</body>
</html>

在这里插入图片描述

背景

背景图片
# background-image: url("1.jpg");默认是平铺的
# background-repeat: no-repeat;把背景图片改为不平铺
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        #nav{
            width: 500;
            height: 300px;
            border: red 1px solid;
            background-image: url("1.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="nav">
    </div>
</body>
</html>

在这里插入图片描述

盒子模型

什么是盒子

在这里插入图片描述

margin: 外边框

padding: 内边框

border: 边框

圆角边框和阴影

#  border-radius 添加圆角的边框 根据尺寸来定
#  box-shadow 盒子的阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
            box-shadow:  10px 10px 5px #888888;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

在这里插入图片描述

display和浮动

# display:block 块元素
# float 浮动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        div{
          width: 100px;
          height: 50px;
          border: 2px solid red;
        }
        span{
          width: 100px;
          height: 50px;
          border: 2px solid red;
          display: block;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

overflow及父级边框塌陷问题

# clear: right 右侧不允许有浮动元素
# clear: left  左侧不允许有浮动元素
# clear: both  俩侧不允许有浮动元素
# clear: none  没有浮动元素

解决方案:

​ 1.增加父级元素的高度

​ 2.增加一个空的div标签,清除浮动

# voerflow: 避免内容不能完整的展开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
      div{
          width: 200px;
          height: 100px;
          overflow: scroll;
      }
    </style>
</head>
<body>
    <div>
        <img src="1.jpg">
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</body>
</html>

在这里插入图片描述

定位

相对定位

# position: relative; /*相对定位*/
# 相对定位就是在最一开始的位置进行偏移
# 例如: 向上偏移了10px,又想向下偏移10px,这时不会回到一开始的位置,而是在一开始的位置向下偏移10px,这就是相对定位,就是无论想什么地方偏移,永远都是从最一开始的位置开始偏移。

# top 上
# left 左
# bottom 下
# right 右
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
        div{
            margin: 10px;
            padding: 10px;
            border: 2px solid red;
        }
        div[id=first]{
            background-color: yellow;
            border: 2px dotted blue;
            position: relative; /*相对定位*/
           top: -10px;
        }
        div[id=two]{
            background-color: pink;
            border: 2px dotted blue;
        }
        div[id=three]{
            background-color: purple;
            border: 2px dotted blue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="two">第二个盒子</div>
        <div id="three">第三个盒子</div>
    </div>
</body>
</html>

在这里插入图片描述

绝对定位

# position: absolute; /*绝对定位*/
# 没有父级元素定位的前提下，相对于浏览器定位
# 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
# 在父级元素范围内移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网站</title>
    <style>
         div{
            margin: 10px;
            padding: 10px;
            border: 2px solid red;
        }
        div[id=first]{
            background-color: yellow;
            border: 2px dotted blue;
            position: absolute; /*绝对定位*/
            
        }
        div[id=two]{
            background-color: pink;
            border: 2px dotted blue;
        }
        div[id=three]{
            background-color: purple;
            border: 2px dotted blue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="two">第二个盒子</div>
        <div id="three">第三个盒子</div>
    </div>
</body>
</html>

固定定位

#  position: fixed;
# 位置固定死，不会因为页面滑动或者页面改变而改变
Mls_Lucky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 引入字体
exlinker的博客
07-18 1万+
文章目录涉及知识@font-face特点用法属性解析font-family用法简单应用更多应用网络/本地引入本地引入网络引入引入其他格式字体引入系列字体 涉及知识 @font-face @font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。 特点 可以自定义字体名称和与名称对应的字体文件 可以消除用户对电脑字体的依赖 可以用于字体图标的引入 用法 @font-face { font-family: "myFont"; src: url("/fonts/OpenS
CSS 3D效果
weixin_68485297的博客
04-11 7558
一、动画效果 1、Transform属性 Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。 2、animation动画属性 语法： animation：（ animation-name animation–duration animation-timing-functionanimation-delayanimation-iteration-count animat...
html标签选择器高级用法,CSS_CSS注释的一些高级用法，准修饰选择器（Quasi-qualified sel - phpStudy...
weixin_36016360的博客
06-04 112
CSS注释的一些高级用法准修饰选择器(Quasi-qualified selectors)你应当避免过分修饰选择器，例如如果你能写 .nav{} 就尽量不要写 ul.nav{}。过分修饰选择器将影响性能，影响 class 复用性，增加选择器私有度。这些都是你应当竭力避免的。不过有时你可能希望告诉其他开发者 class 的使用范围。以 .product-page 为例，这个 class 看起来像是一...
网页美化
weixin_51500468的博客
10-15 2411
1、为啥美化网页： 有效的传递页面的信息 美化页面，页面的漂亮，才能吸引用户 凸显主题 提高我们的用户的体验 1，1 ，span标签的使用 重点突出的文字，使用span标起来: 效果图 1、2，字体的样式： ...
css样式选择器介绍
xh0112的博客
12-07 2223
CSSCSS书写位置1.内联式2.对应样式3.外链式css选择器1.标签选择器2.ID选择器3.类选择器4.通配符5.后代选择器6.子代选择器 CSS书写位置 1.内联式 <div style="输入样式"> <p></p> </div> 直接在标签输入style输入样式，添加样式结构。 2.对应样式 <head> <style> h1{} div{} </style> </head>
玩转 CSS3 3D 变换：打造炫酷立体网页效果
一切不是冲你而来的，一切都是为你而来的。
04-13 1万+
CSS3 立体 3D 变换
CSS 浮动
m0_52861684的博客
08-28 5193
CSS浮动。
利用css 动画实现节流
热门推荐
D_Z_Yong的博客
11-16 2万+
css节流
浅学CSS
m0_63640914的博客
08-06 1954
自己浅学css
css module
xun__xing的博客
08-27 5811
css module一、css module1.思路2.实现原理3.如何应用样式 一、css module 1.思路 通过命名规范来限制类名太过死板，而css in js虽然足够灵活，但是书写不便。 css module 开辟一种全新的思路来解决类名冲突的问题 css module 遵循以下思路解决类名冲突问题： css的类名冲突往往发生在大型项目中 大型项目往往会使用构建工具（webpack等）搭建工程 构建工具允许将css样式切分为更加精细的模块 同JS的变量一样，每个css模块文件中难以出现冲突
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
css的选择器有哪些？权重由大到小是怎么排序的？
最新发布
BANaanaa的博客
09-10 529
来看看css的选择器与权重比吧
VitePress 自定义 CSS 指南
软考鸭
09-06 544
首先，在你的 VitePress 项目中，创建一个自定义 CSS 文件。例如，在目录下创建一个名为custom.css的文件。接下来，你需要在自定义主题入口文件中引入这个 CSS 文件。如果你的项目结构遵循 VitePress 的默认布局，这个文件通常是。import './custom.css' // 引入自定义 CSS。
css之雪碧图（精灵图）
qq_55961367的博客
09-02 789
雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。听到雪碧图是不是跟我一样，啥？以下是本人自己写的例子，大图的图片是在百度找的。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 486
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
css
05-28
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页内容样式和布局的标记语言，它可以控制网页的字体、颜色、背景、布局等外观和风格。 CSS使用选择器来选择要应用样式的元素，然后使用属性来定义这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值