二、CSS入门

已于 2022-07-15 16:21:14 修改
阅读量86 收藏
点赞数
文章标签： css html css3
于 2022-06-12 17:37:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43374578/article/details/125247202
版权

一、基本介绍

  • CSS: Cascading Style Sheet，层叠样式表，标记语言
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style: 对应的样式
        p： 选择器，对html中哪个元素进行样式修改
           具体的样式： 通过k-v的方式来进行赋值-->
    <style>
        p {
            color: red;
            font-size: 20px; /*px代表像素*/
        }
    </style>
</head>
<body>

<p>有点意思</p>
</body>
</html>

1. 选择器

1.1 标签选择器

  • 利用标签名作为选择器
  • 能够针对页面的所有同名标签进行选择，但是对这些标签中的数据不能差异化显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: green;
        }

        div {
            color: red;
        }
    </style>
</head>
<body>

<p>青椒</p>
<p>黄瓜</p>
<p>青枣</p>

<div>西红柿</div>
<div>圣女果</div>
<div>火龙果</div>

</body>
</html>

1.2 类选择器

  • 差异化选择不同的标签，单独选一个或几个标签，使用类选择器
  • 开发最常用
  • 一个html骨架，可以用多个类选择器来修饰
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器： 名字自己定义，不能和标签选择器重名*/
        .erick-style {
            color: red;
        }

        .my-style {
            font-size: 30px;
        }
    </style>
</head>
<body>

<p class="erick-style">青椒</p>
<p>黄瓜</p>
<p>青枣</p>

<div class="erick-style my-style">西红柿</div>
<div>圣女果</div>
<div>火龙果</div>

</body>
</html>

1.3 id选择器

  • html骨架中id是唯一的，id选择器一般适用于页面中唯一的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--ID选择器： 只能被调用一次，因为html骨架中id是唯一的-->
    <style>
        #erick-style{
            color: red;
        }
        #other-style{
            color: red;
        }
    </style>
</head>
<body>

<p id="erick-style">青椒</p>
<p>黄瓜</p>
<p>青枣</p>

<div id="other-style">西红柿</div>
<div>圣女果</div>
<div>火龙果</div>
</body>
</html>

1.4 通配选择器

  • 模糊匹配，选择对应的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>

<p>青椒</p>
<p>黄瓜</p>
<p>青枣</p>

<div>西红柿</div>
<div>圣女果</div>
<div>火龙果</div>
</body>
</html>

2.字体

2.1 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 1. font-family:
                 1.1 字体， 可以配置多个字体，依次解析，保证不同系统都能检测到
                 1.2 一般是用来直接修饰body，保证整个页面都是统一字体
         2. font-size:
                 2.1 字体大小一般是用像素表示
                 2.2 谷歌浏览器默认是16px
                 2.3 不同浏览器可能不同，因此一般显示的指定大小
                 2.4 可以给body来统一指定
                 2.5 标题比较特殊，需要单独指定像素大小
         3. font-weight:
                 3.1 文字粗细
                 3.2 normal, bold,  bolder, number(不要放px)
                 3.3 开发中更加提倡用数字
         4. font-style:
                 4.1 文字样式
                 4.2 italic倾斜， normal
                 4.3 实际开发主要是让倾斜的文字变得不倾斜-->
    <style>
        p {
            font-family: "Microsoft YaHei UI", "Times New Roman";
            font-size: 40px;
            font-weight: 700;
            font-style: italic;
        }
    </style>
</head>
<body>

<p>Hello 舒展</p>
</body>
</html>

2.2 复合属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 复合写法：
           1. 必须严格遵守顺序： font： font-style font-weight  font-size/line-height  font-family
           2. 不需要设置的属性可以省略(取默认值)， 但必须保留font-size 和 font-family, 否则font属性不起作用-->
    <style>
        p {
            font: italic 700 40px "Microsoft YaHei UI", "Times New Roman";
        }
    </style>
</head>
<body>
<p>Hello 舒展</p>
</body>
</html>

3. 文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. color: 文本颜色，三种表示方式
               1.1 预定义颜色：red，green，blue等
               1.2 十六进制： #FF6600, 比较常用
               1.3 RGB代码： rgb(255,0,0)
         2. text-align: 元素内 文本内容的水平对齐方式
               1.1 left(默认), right, center
               1.2 本质是元素盒子内部的对齐
         3. text-decoration: 文本修饰，下划线，删除线，上划线等
               3.1 none(默认), underline, overline(上划线)，line-through(删除线)
               3.2 可以用来去掉超链接的下划线
         4. text-indent: 首行缩进，用于p标签
               4.1 px：显示指定缩进几个像素
               4.2 em：针对当前文本，当前元素2个文字大小的距离
         5. line-height: 行间的距离，行高
               5.1 行间距： 文本高度+上间距+下间距
         -->
    <style>
        p {
            color: rgb(255, 0, 0);
            text-align: left;
            text-decoration: underline;
            text-indent: 2em;
            line-height: 20px;
        }
    </style>
</head>
<body>

<p>Hello 舒展</p>
<p>Hello 舒展</p>
</body>
</html>

4. CSS引入方式

4.1 内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式表：
          1. 写在html页面内部，将所有的css代码抽取出来，单独放在style标签中
          2. style标签理论上可以放在html文档任何位置，一般放在head标签中
          3. 方便控制整个html页面的所有元素
          4. 代码结构清晰，但html骨架和css样式没有分离-->
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>

<p>Hello Erick</p>
</body>
</html>

4.2 行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--行内样式表： 在元素标签内部的style属性中设定css样式
               1. 适合简单样式修改
               2. 只能控制当前的标签设置样式-->
<p style="color: red; font-size: 20px">Hello Erick</p>

</body>
</html>

4.3 外部样式

  • CSS文件
p {
    color: black;
    font-size: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--链接到外部的样式， 实现样式和html骨架分离-->
    <link rel="stylesheet" href="erickStyle.css">
</head>
<body>

<p>Hello Erick</p>
</body>
</html>

5. WebStorm快捷键

# 快速生成多个div
div*10     然后TAB键

# 快速生成父子元素： 适用于很多不同的元素
ul>li    然后TAB键

# 快速生成兄弟元素： 适用于很多不同的元素
div+p   然后TAB键

二、CSS进阶

1. 复合选择器

  • 将基础选择器进行组合即可

1.1 后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--后代选择器： 包含选择器，
    1. 可以选择父元素里面子元素
    2. 按照规律继续往下选择
    3. 基础选择器可以是任意的选择器类型-->
    <style>
        ul li {
            background-color: red;
        }

        ul li a {
            color: green;
        }
    </style>
</head>
<body>
<ul>
    <li>Lucy</li>
    <li>Jerry</li>
    <li>Tom</li>
    <li><a href="www.baidu.com">百度一下</a></li>
</ul>

<ol>
    <li>Lucy</li>
    <li>Jerry</li>
    <li>Tom</li>
</ol>

</body>
</html>

1.2 子选择器

  • 只能选择子元素，而不能是孙子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 子选择器：
       1. 只能作用于父元素的子元素，不能继续往下
       2. 可以作用域任何基础选择器，用 > 来表示-->
    <style>
        .nav > p {
            color: green;
        }
    </style>
</head>
<body>

<div class="nav">
    <p>Hello</p>
    <div>
        <p>你好</p>
    </div>
</div>

</body>
</html>

1.3 并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--并集选择器： 可以将公共部分的样式抽取出来
        1. 每一个选择器可以是任意基础选择器的组合-->
    <style>
        p, h2, .tev, ul li {
            color: green;
        }
    </style>
</head>
<body>

<p>Hello</p>
<h2>你好</h2>
<div class="tev">彩电</div>
<ul>
    <li>水果</li>
    <li>蔬菜</li>
    <li>肉蛋</li>
</ul>
</body>
</html>

1.4 伪类选择器

a. 链接伪类选择
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   
    <style>
    /*按照顺序定义*/
    
        /*未点击的链接*/
        a:link {
            color: black;
            text-decoration: none;
        }
        /*点击后的链接*/
        a:visited{
            color: red;
        }
        /*鼠标经过时*/
        a:hover{
            color: green;
        }
        /*鼠标点击，但是没有松开时*/
        a:active{
            color: darkmagenta;
        }
    </style>
</head>
<body>

<a href="#">小猪佩奇</a>
</body>
b. focus伪类选择器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*获得光标的input元素： 经过哪个input表单，就会变颜色*/
        input:focus {
            background-color: green;
            color: red;
        }
    </style>
</head>
<body>

<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
</body>
</html>
飞翔荷兰号
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS从入门到精通
cgblpx的博客
06-01 2万+
CSS技术 什么是CSS CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。 主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。 CSS的用法 需求::将单元格内文字居中显示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css的使用</title>
CSS入门教程篇
10-30
CSS入门教程
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS入门 超详细
weixin_55816781的博客
04-12 6639
CSS 一基础认知 1.1：css的介绍 css：层叠样式表 css作用：给页面中的HTML标签设置样式 1.2css语法规则 写在哪里 css写在style标签中，style标签一般写在head标签里面，title标签下面 样式： 选择器{ 属性名:属性值; } 1.3css初体验 常见属性： color：文字颜色 font-size:字体大小 background-color:背景颜色 width:宽度 height：高度 <!DOCTYPE html> <html lang="e
TailWindCSS入门
cccdf_jjj的博客
06-15 5938
上一篇文章我们说过了如何搭建项目以及引入TailWindCSS，这篇文章我们说一下如何使用它，刚看到的时候我对这些缩写感觉很迷茫呀，官网我也没找到如何能知道具体对应的都是撒意思，后面找到一片天比较详细的介绍的文章，认真研究了一下，文章我会放在本文的最末尾。好啦话不多说，开始吧！1.screens(也可以自定义媒体查询屏幕的宽度) 2.颜色 一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，green： 3.纵横比--aspect 4.容器--container 6.列--co.
CSS入门
wuyxinu的博客
12-17 6万+
目录 一、CSS简介 二、内容 1.css的引入方式 2.元素的id和class 3、CSS选择器 4、文本样式总结 5、文本样式总结 6、边框样式 7、 背景样式概述 8、超链接样式 9、图片样式 10、列表样式 11、表格样式 12、CSS盒子模型 13、浮动布局 14、定位布局 预备知识与后续知识及项目案例 [HTML入门与进阶以及HTML5][CSS][...
CSS入门PPT
01-19
CSS入门，适合初学者，基础的CSS操作 CSS(Cascading Style Sheet)级联样式单（层叠样式表） HTML5建议把页面外观交给CSS控制。 优点： 表达效果丰富 （元素样式、精确定位） 文档体积小（重复定义 提高传输速度 ...
css 入门基础教程
09-25
css 入门基础，适合刚开始学习css的朋友，最好先有一定的html编写经验。
css入门入门入门入门
05-23
css入门入门入门入门
CSS入门讲解
10-11
WEB项目第二天，HTML和CSS入门讲解，内容还是比较详细的
关于css溢出
weixin_44283589的博客
04-24 435
当四个元素之间存在空白字符时，这些空白字符会占据一定的宽度，导致元素超出了父容器的宽度，从而换行或掉下来。文字溢出：如果四个元素中的文本内容过长，并且没有设置溢出处理方式（如使用 ellipsis），文本内容可能会导致元素宽度超出父容器的宽度，从而换行或掉下来。边框和内边距：如果四个元素设置了边框或内边距，这些边框和内边距会增加元素的实际宽度，导致元素超出了父容器的宽度，从而换行或掉下来。浮动元素：如果四个元素的前面或后面存在浮动元素，浮动元素会影响到后续元素的布局，导致元素换行或掉下来。
postcss简介
地球空间
04-21 466
2. **使用未来 CSS 特性**：PostCSS 允许开发者使用尚未被所有浏览器广泛支持的 CSS 特性，如 `var()` 变量、`@apply` 指令等，然后通过插件将它们转换为当前浏览器兼容的形式。5. **社区支持**：PostCSS 有一个活跃的社区，提供了大量的插件和工具，可以满足各种特定的需求。4. **代码格式化**：PostCSS 可以按照特定的风格指南格式化 CSS 代码，提高代码的可读性。2. **提高代码质量**：代码优化和格式化功能可以提高 CSS 代码的性能和可读性。
CSS基础——2.CSS选择器
weixin_66370632的博客
04-24 1324
1. 通用选择器 通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素,开发中通常使用通用选择器来清除 HTML元素中默认的内外边距
CSS_sass模块化、scss模块化
最新发布
小歪博客
04-25 277
CSS_sass模块化、scss模块化
css中新型的边框设置属性border-inline
qwguo
04-24 499
是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。
vue快速入门（三十六）组件通信-子传父
不起眼小菜菜的博客
04-21 534
注释很详细，直接上代码……
css层叠性，继承性，优先级
2302_79590880的博客
04-20 542
css的三大特性
CSS3新增特性（二）
m0_48670609的博客
04-24 998
接上一篇，CSS3新增特性，包括 2D 转换（位移、缩放、旋转、倾斜）和 3D 转换，以及动画。
描述一下PHP与HTML和CSS的关系
Layla_c的博客
04-22 790
HTML提供了网页的基本结构和内容，CSS为网页添加了美观的样式和布局，而PHP则使得网页具有了交互性和动态性。虽然CSS本身与PHP没有直接的交互，但PHP可以生成包含CSS样式的HTML代码，或者通过动态修改CSS类名或样式属性来实现动态的样式变化。这样，开发者可以根据用户的操作或数据的变化，动态地改变网页的样式和布局，提供更加丰富的用户体验。例如，在构建单页面应用（SPA）时，PHP可以负责后端逻辑的处理和数据的提供，而前端则使用HTML、CSS和JavaScript构建出动态的用户界面。
HTML CSS JS 入门
05-24
很高兴听到你对Web开发感兴趣。下面是一些入门HTML、CSS和JS的资源： 1. HTML: - HTML入门教程：https://www.w3school.com.cn/html/index.asp - MDN HTML文档：https://developer.mozilla.org/zh-CN/docs/Web/HTML 2. CSS: - CSS入门教程：https://www.w3school.com.cn/css/index.asp - MDN CSS文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS 3. JS: - JS入门教程：https://www.w3school.com.cn/js/index.asp - MDN JS文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 此外，还有很多在线课程和视频教程可以供你学习。一些比较受欢迎的平台包括Coursera、Udemy、Codecademy和FreeCodeCamp等等。希望这些资源能够帮助你开始学习Web开发！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值