CSS初体验

已于 2022-05-18 09:35:38 修改
阅读量145 收藏
点赞数
文章标签： css html css3
于 2022-05-10 16:42:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54201133/article/details/124691825
版权

CSS

1.CSS引入方式

内嵌式: CSS写在style标签中

  • 提示: style标签 虽然可以写在页面任意位置,但是通常约定写在head标签中

外联式: CSS写在一个单独的.css文件中

  • 提示:需要通过link标签在网页中引入

行内式: CSS写在标签的style属性中

  • 提示:不推荐使用，之后会配合js使用
1.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>
        p{
            color: brown;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>
1.1内嵌式效果：

在这里插入图片描述

1.2外联式示例：
<!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>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

在这里插入图片描述

1.2外联式效果：

在这里插入图片描述

1.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>
</head>
<body>
    <p style="color: green; font-size: 40px;">这是一个p标签</p>
</body>
</html>
1.3行内式效果：

在这里插入图片描述

2.标签选择器：

结构:标签名{ css属性名:属性值; }
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:

  1. 标签选择器选择的是一类标签， 而不是单独某一个
  2. 标签选择器无论嵌套关系有多深,都能找到对应的标签
示例：
<!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>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>pppppppppp</p>
    <p>pppp</p>
    <p>pp</p>
</body>
</html>
效果：

在这里插入图片描述

类选择器：

结构: .类名{ css属性名:属性值; }
作用:通过类名，找到页面中所有带有这个类名的标签,设置样式
注意点:

  1. 所有标签上都有class属性，class属性的属性值称为类名(类似于名字)
  2. 类名可以由数字、字母、下划线、 中划线组成，但不能以数字或者中划线开头
  3. 一个标签可以同时有多个类名，类名之间以空格隔开
  4. 类名可以重复, 一个类选择器可以同时选中多个标签
示例：
<!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>
        .red{
            color: red;
        }
        .size{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="red">变化</div>
    <div class="size">百变</div>
    <div class="red">学院</div>
    <div class="red size">逍遥</div>
</body>
</html>
效果：

在这里插入图片描述

3.id选择器：

结构: #id属性值{ Css属性名:属性值; }
作用:通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点:

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码， 在一个页面中是唯一的， 不可重复的!
  3. 一个标签上只能有一个id属性值
  4. 一 个id选择器只能选中一个标签
示例：
<!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>
        #red{
            color: red;
        }
        #size{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div id="red">变化</div>
    <div id="size">百变</div>
</body>
</html>
效果：

在这里插入图片描述

4.通配符选择器：

结构: { css属性名:属性值; }
作用:找到页面中所有的标签，设置样式
注意点:

  1. 开发中使用极少，只会在极特殊情况下才会用到
  2. 在一些小页面中可能会用于去除标签默认的margin和padding
示例：
<!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>
        *{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>变化</div>
    <p>百变</p>
</body>
</html>
效果：

在这里插入图片描述

5.文字基本样式：

属性名: font-size
取值:数字+px
注意点:

  • 谷歌浏览器默认文字大小是16px
  • 单位需要设置，否则无效
5.1字体粗细

属性名: font-weight

关键字取值
正常normal
加粗bold
纯数字100~900的整百数:
正常400
加粗700

注意点:

  • 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
  • 实际开发中以:正常、加粗两种取值使用最多。
示例：
<!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>
        .qg{
            font-weight: bold;
        }
        .sf{
            font-weight: normal;
        }
        .q{
            font-weight: 400;
        }
        .s{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p>奇怪</p>
    <p><strong>舒服</strong></p>
    <p class="sf">舒服</p>
    <p class="qg">奇怪</p>
    <div class="s">舒服</div>
    <div class="q">奇怪</div>
</body>
</html>
效果：

在这里插入图片描述

5.2字体倾斜：

属性名:font-style

关键字取值
正常(默认值)normal
倾斜italic
示例：
<!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>
        .qg{
            font-style: normal;
        }
        .sf{
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>奇怪</p>
    <p><em>舒服</em></p>
    <p class="qg">奇怪</p>
    <p class="sf">舒服</p>
</body>
</html>
效果：

在这里插入图片描述

5.3字体系列font-family

在这里插入图片描述

在这里插入图片描述

#### 示例：

<!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>
        div{
            font-family: 楷体,微软雅黑, 黑体, sans-serif;
        }
    </style>
</head>
<body>
    <div>字体大小</div>
</body>
</html>
效果：

在这里插入图片描述

5.6样式的层叠问题

**问题:**给同一个标签设置了相同的样式，此时浏览器会如何渲染呢?
结果:如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖)，写在最下面的会生效

示例：
<!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>
        div{
            color: red;
            color: blue;
        }
    </style>
</head>
<body>
    <div>字体颜色</div>
</body>
</html>
效果：

字体颜色

5.7字体font相关属性的连写：

属性名: font (复合属性)
取值:

  • font : style weight size family;

省略要求:

  • 只能省略前两个，如果省略了相当于设置了默认值

注意点: 如果需要同时设置单独和连写形式

  • 要么把单独的样式写在连写的下面
  • 要么把单独的样式写在连写的里面
示例:
<!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>
        div{
            /*style weight size family*/
            font: italic bold 60px 宋体;
        }
        p{
            font: italic bold 60px 宋体;
            font: italic 700 60px 微软雅黑;
        }
    </style>
</head>
<body>
    <div>这是div标签</div>
    <p>这是p标签</p>
</body>
</html>
效果：

在这里插入图片描述

5.8文本缩进

属性名：text-indent

取值:

  • 数字+px
  • 数字+em(推荐：1em=当前标签的font-size的大小)
示例:
<!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>
        textarea{
            text-indent: 2em;
        }
        
    </style>
</head>
<body>
    <textarea cols="30" rows="10">士大夫顶顶顶顶顶顶顶顶顶顶顶顶顶反对看来感觉方格弗兰克给发</textarea>
    
</body>
</html>
效果：

在这里插入图片描述

5.9水平对齐方式(左，中，右)

text-align : center能让哪些元素水平居中?

  1. 文本
  2. span标签、a标签
  3. input标签、 img标签

注意点:

如果需要让以上元素水平居中，text-align: center需要给以上元素的父元素设置

示例：
<!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>
        p{
            text-align: center ;
        }
    </style>
</head>
<body>
    <p>我当放规范</p>
</body>
</html>
效果：

我当放规范

5.10文本修饰线

属性名: text-decoration

属性值效果
underline下划线(常用)
line-through删除线(不常用)
overline上划线(几乎不用)
none无装饰线(常用)
示例：
<!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>
        div{
            text-decoration: underline;
        }
        p{
            text-decoration: line-through;
        }
        h1{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <p>我是p标签</p>
    <h1>我是h1</h1>
    <a href="../day1/1.html">我是超链接</a>
</body>
</html>
效果：

在这里插入图片描述

5.11行高

作用:控制一行的上下行间距
属性名: line-height
取值:

  • 数字+ px
  • 倍数(当前标签font-size的倍数)

应用:

  1. 让单行文本垂直居中可以设置line-height :文字父元素高度
  2. 网页精准布局时， 会设置line-height: 1可以取消上下间距

行高与font连写的注意点:

  • 如果同时设置了行高和font连写，注意覆盖问题，
  • font : style weight size/line-height family ;
示例:
<!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>
        p{
            text-indent: 2em;
            /*style weight size/line-height family*/
            font: italic 700 40px/2 宋体;
            /*斜体 加粗 40px的大小 2倍行高 宋体*/
        }
    </style>
</head>
<body>
    <p>1916年，德国天文学家卡尔·史瓦西通过计算得到了爱因斯坦场方程的一个真空解，这个解表明，如果一个静态球对称星体实际半径小于一个定值，
        其周围会产生奇异的现象，即存在一个界面——“视界”，一旦进入这个界面，即使光也无法逃脱。
        这个定值称作史瓦西半径，这种“不可思议的天体”被美国物理学家约翰·阿奇博尔德·惠勒命名为“黑洞”。
        黑洞无法直接观测，但可以借由间接方式得知其存在与质量，
        并且观测到它对其他事物的影响。借由物体被吸入之前的因黑洞引力带来的加速度导致的摩擦而放出x射线和γ射线的“边缘讯息”，可以获取黑洞存在的讯息。
        推测出黑洞的存在也可借由间接观测恒星或星际云气团绕行轨迹来得出，还可以取得其位置以及质量。</p>
</body>
</html>

5.12 标签水平居中方法总结margin: 0 auto

如果需要让div. p. h (大盒子)水平居中
可以通过margin: 0 auto ;实现
注意点:

  1. 如果需要让div、p、h (大盒子) 水平居中，直接给当前元素本身设置即可
  2. margin: 0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
<!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>
        p{
            width: 400px;
            height: 400px;
            text-indent: 2em;
            margin: 0 auto;
            background-color: brown;
        }
    </style>
</head>
<body>
    <p>1916年，德国天文学家卡尔·史瓦西通过计算得到了爱因斯坦场方程的一个真空解，这个解表明，如果一个静态球对称星体实际半径小于一个定值，
        其周围会产生奇异的现象，即存在一个界面——“视界”，一旦进入这个界面，即使光也无法逃脱。
        这个定值称作史瓦西半径，这种“不可思议的天体”被美国物理学家约翰·阿奇博尔德·惠勒命名为“黑洞”。
        黑洞无法直接观测，但可以借由间接方式得知其存在与质量，
        并且观测到它对其他事物的影响。借由物体被吸入之前的因黑洞引力带来的加速度导致的摩擦而放出x射线和γ射线的“边缘讯息”，可以获取黑洞存在的讯息。
        推测出黑洞的存在也可借由间接观测恒星或星际云气团绕行轨迹来得出，还可以取得其位置以及质量。
    </p>
</body>
</html>
效果：

在这里插入图片描述

成为一个优秀的人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css初体验
Jsjendndn的博客
05-23 707
css用于定义网页样式，包括针对不同设备和屏幕尺寸的设计和布局。语法：由选择器和声明组成。选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。
CSS变量初体验
06-30
根据Mozilla软件工程师Cameron McCormack的透露 火狐浏览器从V29版开始支持一种新的CSS特征 CSS变量 下面这个视频可以让你大概的了解一下CSS变量的基本情况
记录：如果更改外层加了class名，但是样式没有更新到页面中是什么原因?
ni15534789894的博客
01-24 814
在这里 style中不要加leng=“sass”，然后将/deep放到最前面 <style scoped> /deep/ .tabPane .el-tabs__item.is-active{ color: #b417d4; } /deep/ .tabPane .el-tabs__item:hover{ color: #b417d4; } /deep/ .tabPane .el-tabs__active-bar{ background-color: #b417d4; } &l
02 【TailWind CSS 初体验】
DSelegent的博客
08-16 170
02 【TailWind CSS 初体验】
前端初学之CSS初体验
qq_64133626的博客
11-16 251
一、从什么是CSS开始（百度一下，你也知道） CSS：Cascading Style Sheet 层叠样式表。是一组样式设置的规则，用于控制页面的外观样式。 1、特点： 实现内容与样式的分离，便于团队开发； 样式复用，便于网站的后期维护； 页面的精确控制，让页面更精美 2、CSS引用方式： 1.内嵌样式 写在标签属性的位置，style="color:red"引号内写css属性和值 形式也是键值对，通过：连接，通过；分隔 需要尽量避免代码重复 优点：精准，明确.
tailwindcss初体验
yunbabac的博客
01-23 584
新建assets/css/style.css。将用到的类编译成css文件。
CSS初体验3D效果
weixin_43795844的博客
07-29 129
CSS3D效果
【前端 - CSS】第 9 课 - CSS 初体验
深入挖掘，筑基为先；知其然，知其所以然。
06-10 1527
层叠样式表（Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML文档的呈现（美化内容）。
css学习初体验
liu112125的博客
03-18 294
CSS基础选择器 标签选择器(选择全部同类标签）
CSS体验
lan_da_wang的博客
04-27 265
</em>:表示字体倾斜。区别：<em>
JQuery 初体验(建议学习jquery)
10-29
JQuery 是一个非常流行的 JavaScript 库，其市场份额高达70%，深受开发者喜爱。...通过这个简单的JQuery初体验，我们可以看出，它不仅能够简化DOM操作，还能帮助我们解决实际开发中的各种问题，提高开发效率。
小程序开发初体验
03-29
开发小程序所需的基本技能   关于小程序的介绍和使用场景这里不作...如果你是一名没有任何基础的小程序爱好者，我建议你先去系统学习HTML、CSS、JS、JSON、XML再来学习小程序。   注意：小程序不是BS架构，它是一个
React Native初体验
04-26
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，目前...RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用;着力于提高多平台开发的开发效率 —— Learn once, write anywhere.
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 课后练习
01-10
响应式 Web 开发项目教程（HTML5+CSS3+Bootstrap）第 2 版第 1 章 HTML5+CSS3 初体验课后练习 本资源涉及到的知识点包括 HTML5、CSS3、Bootstrap 等响应式 Web 开发技术。下面是对每个知识点的详细解释： 一、 ...
【前端技巧】css篇
最新发布
Moriarty123666的博客
06-20 647
第一个参数为变量名称，第二个参数为初始值，默认为0。
【CSS in Depth2精译】1.2 继承~1.3 特殊值
PeacefulWinter的博客
06-20 823
本文介绍了CSS样式设置的另一种方式——继承，以及与样式重置密切相关的四个常见关键字：inherit、initial、unset 以及 revert。通过具体示例对这些知识点进行了详细说明。
CSS新手入门笔记【导入方法、选择器介绍、选择器优先级、属性详细介绍、盒子模型】
m0_73940426的博客
06-20 1300
CSS（Cascading Style Sheets，层叠样式表）是网页设计的核心语言之一，它赋予了网页色彩、布局与动态效果，使得网页不仅具有功能性，更富有艺术美感。本文旨在深入浅出地介绍CSS的基础概念、核心特性和进阶技巧，帮助你从零开始，逐步成长为CSS领域的高手。
【教程】hexo 更换主题后，部署在 Github Page 无 CSS 样式
noname 博客
06-17 557
最近更换了 hexo 的主题后，重新部署到 Github Page 上发现不显示 CSS 样式，但在本地启动时又是正常的效果。此外，检查资源请求，发现多个 .css 文件请求 404，判断可能部署后路径除了问题。本文先讲一下如何更换主题，然后讲一下如何修改路径，让样式能够被正确请求。
css 直线csscss
08-25
你想要了解如何使用 CSS 来创建直线吗？在 CSS 中，你可以使用 `border` 属性或者 `hr` 元素来创建直线效果。 1. 使用 `border` 属性： 你可以为一个元素添加 `border` 属性，并设置宽度、样式和颜色来创建直线效果...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值