前端秘法基础式(CSS)(第一卷)

这篇具有很好参考价值的文章主要介绍了前端秘法基础式(CSS)(第一卷)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.认识CSS

CSS 指的是层叠样式表(Cascading Style Sheets),它是一种用于描述网页外观和布局的语法

CSS 可以定义网页中元素的字体、颜色、大小、位置、背景等样式,使网页具有美观的外观和统

一的风格。

通过将 CSS 样式表与 HTML 文档关联起来,可以实现对网页样式的控制和管理。CSS 的优点

在于它可以实现网页样式的分离,使得 HTML 主要负责网页的结构和内容,而 CSS 则专注于样式

定义,提高了代码的复用性和维护性。 

例如,以下是一个简单的 CSS 规则:

p {
  color: red;
  font-size: 16px;
}

上述规则将使所有 <p> 标签中的文本颜色变为红色,字体大小为 16 像素。通过这种方式,可以

方便地为整个网站或特定页面应用一致的样式。

CSS 还支持各种选择器,如类选择器、ID 选择器、元素选择器等,以便更精确地定位和样式化特

定的 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>
    <style>
        p{
            color: aqua;
            font: 16px;
        }
    </style>
</head>
<body>
    <p>
        行也思君,&nbsp; 坐也思君
    </p>
</body>
</html>

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

二.CSS引入方式

1.内部样式表

写到style标签中,嵌入html内部

优点:可以使样式和页面结构分离

缺点:分离的不够彻底

引入方式参考上文

2.行内样式表

通过style属性来指定某个标签的样式,只适用于简单的设计,且优先级较高会覆盖其他的样式

<body>
    <p style="color: aquamarine; font-size: 16px;">
        行也思君,&nbsp; 坐也思君
    </p>
</body>

3.外部样式

实际开发中最常用的样式,单独写一个.css文件,通过link链接

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

三.CSS选择器的种类

以下内容只是CSS2标准中支持的选择器

1.基础选择器(单个选择器构成的)

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器

1.1类选择器

通过给标签一个class属性(可以是多个class属性,中间用空格连接,用于样式叠加),在css文件中,对于这个class进行样式选择

<p class="poem">
        行也思君,&nbsp; 坐也思君
</p>
<!--html文件-->
.poem{
    color:black;
    font-size: 20px;
}
<!--css文件-->

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

1.2id选择器

<p id="poem">
        行也思君,&nbsp; 坐也思君
    </p>
#poem{
    color:black;
    font-size: 20px;
}

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

1.3通配符选择器

在实际应用开发中用来针对页面中所有元素默认样式进行消除,主要用来消除边距

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

*{
    background-color: beige;
}

2.复合选择器(把多种选择器综合运用起来)

  • 后代选择器
  • 子选择器
  • 并集选择器
  • 伪类选择器

2.1后代选择器

又叫包含选择器,选择某个父元素中的某个子元素

父级元素 子级元素{

        .....

}

只影响被选择的子级元素

<style>
        ol li{
            color: blue;
        }
    </style>

前端秘法基础式(CSS)(第一卷),前端秘法,前端,css

2.2伪类选择器

链接伪类选择器

a:link选择未被访问过的链接

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

a:hover选择鼠标指针悬停上的链接

a:active选择活动链接(鼠标按下但未弹起)

a换成input也可以哦

具体可以参考w3c官方文档文章来源地址https://www.toymoban.com/news/detail-827222.html

到了这里,关于前端秘法基础式(CSS)(第一卷)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端基础HTML、CSS--6(CSS-3)

    1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级。 1.1层叠性 相同选择器给设置相同的样式 ,此时一个样式就会 覆盖(层叠) 另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则: ·样式冲突,遵循的是 就近原则 ,哪个样式离结构近

    2023年04月08日
    浏览(47)
  • 前端基础之CSS

    目录 一、CSS介绍 CSS语法 CSS注释 CSS的几种引入方式 二、CSS选择器 基本选择器 组合选择器 属性选择器 分组和嵌套选择器 伪类选择器 伪元素选择器 选择器的优先级 三、CSS属性相关 宽和高 字体属性 文字属性 背景属性 边框 border-radius display属性 CSS盒子模型 margin外边距 paddi

    2024年02月06日
    浏览(36)
  • CSS样式前端HTML页面常用CSS效果实现及其相关配置信息------前端入门基础教程

    !DOCTYPE html !-- 这是HTML的注释 -- html lang=\\\"en\\\" id=\\\"myHtml\\\"     head         !-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 --         meta charset=\\\"UTF-8\\\"         meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"         titleHtmlAll/title         

    2024年02月05日
    浏览(59)
  • 04-前端基础CSS第二天

    目标: 能使用emmet语法 能够使用CSS复合选择器 能够写出伪类选择器的使用规范 能够说出元素有几种显示模式 能够写出元素显示模式的相互转换代码 能够写出背景图片的设置方式 能够计算CSS的权重 目录: Emmet语法 CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性

    2024年02月08日
    浏览(41)
  • 前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月17日
    浏览(45)
  • 前端秘法基础式终章----欢迎来到JS的世界

    目录 一.JavaScript的背景 二.JavaScript的书写形式 1.行内式 2.嵌入式 3.外部式 三.JS中的变量 1.变量的定义 2.JS动态类型变量 2.1强类型和弱类型 3.JS中的变量类型 四.运算符 五.if语句和三元表达式和Switch语句和循环语句 六.数组 1.创建获取数组元素 2.新增数组元素 七.函数 1.函数的声

    2024年02月21日
    浏览(40)
  • 【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

    欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。 CSS,即层叠样式表(Cascading Style Sheets),是一种用于控制网

    2024年02月12日
    浏览(56)
  • 〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专栏\\\"加入社区获取 所有 付费专栏的内容之外, 还可以通过加入 星荐官共赢计划 加入私域社区。 当前子专栏 基础入门

    2024年02月01日
    浏览(48)
  • 【前端|CSS系列第2篇】CSS零基础入门之常用样式属性

    欢迎来到CSS零基础入门系列的第二篇博客!作为前端开发的关键技术之一,CSS(层叠样式表)能够为网页添加各种样式和布局效果。对于前端零基础的小白来说,了解和掌握CSS的常用样式属性是入门的关键。本篇博客将带你深入了解如何设置常用样式属性,包括文本属性、字

    2024年02月11日
    浏览(70)
  • 前端基础:HTML和CSS简介

    目录 1、HTML 简介 (1)在 HTML 中引入外部 CSS (2)在 HTML 中引入外部 JavaScript 2、CSS 简介 (1)CSS 的基本语法 (2)三种使用 CSS 的方法 2.1 - 外部 CSS 的使用 2.2 - 内部 CSS 的使用 2.3 - 行内 CSS 的使用         HTML 指的是超文本标记语言 ( H yper  T ext  M arkup  L anguage), 标记语

    2024年02月16日
    浏览(42)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包