CSS概述 | CSS的引入方式 | 选择器

这篇具有很好参考价值的文章主要介绍了CSS概述 | CSS的引入方式 | 选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.CSS概述

CSS,全称Cascading Style Sheets(层叠样式表),是一种用来设置HTML(或XML等)文档样式的语言。CSS的主要作用是描述网页的布局和外观,包括颜色、字体、间距、背景图像等,CSS可以和HTML内容经行分离,这样,一个CSS样式可以用在多个HTML页面,修改时候可以只修改一个CSS文件即可。

CSS的基本语法

选择器 + 一条或N条声明选择器决定针对谁做修改,比如想要对p标签中的字体大小和颜色进行修改,那么p就是一个选择器,这样类型的选择器称为元素选择器

声明,是在一对花括号{}中进行声明 ,每个声明都由两部分组成:属性和值;注:CSS 不区分大小写, 开发时通常使用使用小写字母

p {
  color: red;
  font-size: 16px;
}
2.CSS的引入方式
2.1.内部样式表

通过style 标签将CSS样式嵌入到 html 内部,当CSS内容特别多的时候,html页面就显得很大。这不是一种很好的方法,但是有些网页还是会用,我感觉是历史遗留的问题,哈哈哈。

理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中。

<html lang="en">
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>天空为什么是蓝色的</p>
    </div>
</body>
</html>
2.2.行内样式表

通过 style 属性, 来指定某个标签的样式,只适合于写简单样式. 只针对某个标签生效,这种写法优先级较高, 会覆盖其他的样式

<head>
    <style>
        p { color: red; }
    </style>
</head>
<body>
    <p style="color:blue">天空是什么颜色</p> 
</body>
2.3.外部样式表

实际开发中最常用的方式,创建后缀为css的文件, 使用 link 标签引入 css。

在同级目录下的css文件夹中创建style.css文件

p{
    color: blue;
    font-size: 18px;
}

在一个HTML的文件中引用外部的css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p>大海为什么是蓝色的</p>
</body>
</html>

这样的好处是css样式和html结构彻底分离了,但是受到浏览器缓存影响, 修改之后 不一定 立刻生效。

关于浏览器的缓存

缓存(Cache):提升性能的技术手段,网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取,如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取,浏览器就可以使用缓存先存起来(就是存在本地磁盘上), 减少网络传输的时间和带宽消耗,从而提高访问效率。可以使用 ctrl + F5 强制刷新页面;

3.选择器

前面我们就一直在使用选择器(元素选择器),选择器选中标签元素从而设置元素的属性。选择器可以分为基础选择器和复合选择器,我主要分享常见的基础选择器,关于复合选择器可以去参考文档:链接

注:下面的css代码,都是放在和html同级的css文件夹下

标签选择器

能快速为同一类型的标签都选择出来,但是不能差异化选择

p{
    color: blue;
    font-size: 18px;
}
<link rel="stylesheet" href="./css/style.css">
<p>大海为什么是蓝色的</p>
<p>红苹果</p>

展示结果:使用p标签标识的标签就都是蓝色的了

CSS概述 | CSS的引入方式 | 选择器,网页前端,css,前端

类选择器

类名用.开头的,下方的标签使用 class 属性来调用,如果类名过长, 可以使用 - 分割

.box-height-width{
    height: 50px;
    width: 300px;
}

.blue{
    color: blue;
}

.red{
    color: red;
}

html页面可以使用class引入多个样式,中间用空格隔开

<p class="blue box-height-width">大海为什么是蓝色的</p>
<p class="red ">苹果是红色的</p>

展示结果:

CSS概述 | CSS的引入方式 | 选择器,网页前端,css,前端

id选择器

CSS 中使用 # 开头表示 id 选择器,id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

#box{
    height: 500px;
}

#blue{
    color: blue;
}
<p id="blue box">苹果</p>
<p id="blue">大海为什么是蓝色的</p>

展示结果:

CSS概述 | CSS的引入方式 | 选择器,网页前端,css,前端

通配符选择器

使用 * 的定义, 选取所有的标签

* {
    color: blue;
}

页面的所有内容都会被改成 红色,可以用于修改浏览器的默认属性

复合选择器(了解)

使用基础选择器组合,常见的符合选择器有:后代选择器、子选择器、并集选择器、伪类选择器文章来源地址https://www.toymoban.com/news/detail-826112.html

到了这里,关于CSS概述 | CSS的引入方式 | 选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 1 CSS的引入方式

    1 CSS的引入方式 CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。 行内样式 行内样式,就是写在元素的style属性中的样式,这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以

    2024年02月12日
    浏览(37)
  • CSS||引入方式

    目录 CSS引入方式 行内样式表(行内式) 内部样式表(嵌入式) 外部样式表(链接式) 引入外部样式表 CSS(层叠样式表)是一种用来描述文档样式的样式表语言,它主要用于描述网页的展示样式。在网页开发中,我们通常会用到不同的CSS引入方式来管理和应用样式,包括行

    2024年01月18日
    浏览(37)
  • CSS引入方式

    表示方式 --------预定义的颜色名---------red,green,blue rgb表示法-----红绿蓝三原色,每项取值范围:0-255-----rgb(0,0,0),rgb(255,255,255) 十六进制表示法-----#开头,将数字转换成十六进制表示--------#00000000,#ff000000 元素选择器    /* 元素选择器 */         span{    

    2024年02月10日
    浏览(34)
  • HTML---CSS-引入样式表和选择器

    CSS : Cascading Style Sheet 层叠式样式表 HTML 用于控制网页的结构,CSS则用于控制网页的外观,想要做出美观好看的网页,CSS是必须的 引入外部样式表: 它的属性 rel 和 type 是固定的 语法: 引入内部样式表 type属性也是固定的 语法: 引入行内样式表 语法: 效果: HTML中有两个属

    2024年01月19日
    浏览(40)
  • 三种引入CSS的方式

    概述 Cascading Style Sheet 层叠样式表 前端三大基础之一(Html结构 CSS样式 JS动作) 最早由网景公司(Netscape)提出,在1996年受到w3c的认证,发布了第一版,迄今为止已经是第四版,专门用来负责页面的样式 取代了Html同时渲染结构和样式造成的页面混乱。 使用html同时渲染页面样式

    2024年01月16日
    浏览(36)
  • CSS的引入方式有哪些?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月14日
    浏览(38)
  • 21.5 CSS 网页布局方式

    3.1 浮动元素 3.2 浮动元素的脱标现象 3.3 浮动元素排序规则 3.4 浮动元素帖靠现象 3.5 浮动元素的字围现象 3.6 浮动排版练习 3.7 塌陷 3.8 margin折叠 3.9 清除塌陷 3.9.1 清除塌陷1 3.9.2 清除塌陷2 3.9.3 清除塌陷3 3.9.3.1 外墙法 3.9.3.2 内墙法 3.9.4 清除塌陷4 4.1 清除浮动 4.2 防止父标签塌

    2024年02月09日
    浏览(80)
  • Selenium操作网页时,如何获取元素的CSS选择器?

    输入文本操作的元素的CSS选择器怎么获取,用https://passport.baidu.com/v2/?login演示 要获取元素的CSS选择器,可以使用浏览器的开发者工具来查看页面的HTML结构和元素属性。以下是在Chrome浏览器中获取元素CSS选择器的步骤: 打开Chrome浏览器,并访问目标网站(例如:https://passpor

    2024年01月16日
    浏览(56)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(45)
  • 网页设计前端作品(大一)HTML+CSS

    🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 📔网站布局方面 :计划采用目前主流的、能兼容各大主

    2024年02月09日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包