返回顶部
首页 > 资讯 > 前端开发 > node.js >css规则与选择器的知识点有哪些
  • 494
分享到

css规则与选择器的知识点有哪些

2024-04-02 19:04:59 494人浏览 泡泡鱼
摘要

这篇文章主要介绍“CSS规则与选择器的知识点有哪些”,在日常操作中,相信很多人在css规则与选择器的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css规则与选择

这篇文章主要介绍“CSS规则与选择器的知识点有哪些”,在日常操作中,相信很多人在css规则与选择器的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css规则与选择器的知识点有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

css规则与选择器的知识点有哪些

一 什么是css?

●css指层叠样式表(cascading style sheets)

●样式定义如何显示html元素

●样式通常存储在样式表中

●把样式添加到html4.0中,是为了解决内容与表现分离的问题

●外部样式表可以极大提高工作效率

●外部样式表通常存储在css文件中

●多个样式定义可层叠为一

注意:在学习css之前,你需要具备html的基本知识.之前已经粗略介绍过.后边还会详细介绍

css允许你针对html元素应用特定的样式

css的主要好处在于,它允许你将样式和页面内容进行分离

仅适用html,样式和页面内容混在一起,这样的页面将会变得难以维护

所有的WEB页面样式都可以(也应该)从html文档中分离出来,建立成一个单独的css文件使用

二 内联 嵌入式 外部引用css

在web文档中插入一个样式表是内联样式的使用方法之一.使用内联样式,将独特的样式应用于单个元素

为了使用内联样式,将样式属性添加到相关的标签中.

下面的例子展示了如何创建一个灰色背景和白色文本的段落:

<p style="color:white; background-color:gray;">

This is an example of inline styling.

</p>

运行效果如下:

css规则与选择器的知识点有哪些

◆在<head>标签中,将内部样式定义在<style>元素中

例如:下面代码中的样式将作用在所有<p>段落中

<html>

<head>

<style>

p{

color:white;

background-color:gray;

</sytle>

</head>

<body>

<p>This is my first paragraph.</p>

<p>This is my second paragraph.</p>

</body>

</html>

结果所有的段落都变成白色字体和灰色背景

◆外部引用css:将所有的css样式保存在同一个后缀名.css的拓展文件中

然后通过html标签<link>在html页面的<head>部分将css文件引入

举例说明:

html代码:

<head>

<link rel="stylesheets" href="example.css">

</head>

<body>

<p>这是我的一个段落</p>

<p>这是我的第二个段落</p>

<p>这是我的第三个段落</p>

</body>

css部分:

p{

color:white;

background-color:gray;

所有段落都是统一的样式

●相对路径和绝对路径都可以用来定义css文件的href.在我们的示例中,路径是相对的,因为css文件和html文件位于同一目录下

三 css规则与选择器

css是由浏览器解释的样式规则,然后应用于文档中相应的元素.

样式规则有三部分:选择器 属性 属性值

例如,标题颜色可以定义为:

h2 { color:orange;}

选择器指向需要设置样式的html元素;

声明块包含一个或多个用分号分隔的声明;

每个声明都包含一个由冒号分隔的属性名称和值

例如:

h3{

color:red;

background:#fff;

●最常见和最易于理解的选择器是类型选择器.该选择器以页面上的元素类型为目标

例如,要定位页面上的所有段落

p{

color:red;

font-size:130%;

●css声明总是以分号结尾.而声明块则由大括号包围.

id选择器允许你设置具有id属性的html元素,而不管他们在文档树中的位置.

举例说明:

html部分:

<div id="intro">

<p>今年过节送什么?</p>

</div>

<p>w3cschool会员,送了都说好!</p>

css部分:

#intro{

color:white;

background-colot:gray;

要选择具有特定ID的元素,请使用"#",然后使用元素的id跟随它

class选择器以类似的方式工作.主要区别在于每个元素的id具有唯一性,id每个页面只能应用一次,而class可以在页面上多次使用.

●要选择具有特定类的元素,请使用"."符号,后跟该类的名称

避免使用数字来命名id和class

.mytext{

color:black;

设置class="mytext"的文本颜色为黑色

●这些选择器用于选择另一个元素的后代的元素.选择后代的层级时,你可以根据需要选择尽可能多的层级

例如,要仅定位"intro"部分第一段中的<em>元素

html部分:

<div id="intro">

<p class="first">这是一个<em>段落.</em></p>

<p>这是第二个段落.</p>

</div>

<p class="first">这个段落不在intro部分</p>

<p>这个段落也不在intro部分</p>

css部分:

#intro .first em{

color:pink;

background-color:gray;

因此,只有选中的元素<em>会受到影响.

#test p{

color:red;

上边的例子:为属于id="test"的元素的所有段落设置颜色为红色.

四 css注释

注释用于解释你的代码 ,浏览器会自动忽略注释 .类似于java中的多行注释

五 css的级联与继承

页面的最终外观是不同的样式结合的结果

通过样式的三个主要来源形成一个级联:

●由页面的作者创建的样式表

●浏览器的默认样式

●用户自定义的样式

继承是指属性在页面上的流动方式.除非另有定义,子元素通常会继承父元素的特征

例如:

<html>

<head>

<style>

body{

color:green;

font-family:Arial;

</style>

</head>

<body>

<p>

路人甲

</p>

</body>

</html>

结果:路人甲的颜色为绿色,样式效果和它的父元素<body>是一样的

由于段落标记(子元素)位于正文标记(父元素)内,因此它将采用指定给正文标记的任何样式.

到此,关于“css规则与选择器的知识点有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: css规则与选择器的知识点有哪些

本文链接: https://www.lsjlt.com/news/93149.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css规则与选择器的知识点有哪些
    这篇文章主要介绍“css规则与选择器的知识点有哪些”,在日常操作中,相信很多人在css规则与选择器的知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css规则与选择...
    99+
    2024-04-02
  • css选择器知识点有哪些
    这篇文章主要为大家展示了“css选择器知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css选择器知识点有哪些”这篇文章吧。选择器的种类可以分为三种:...
    99+
    2024-04-02
  • Css选择器必备知识点有哪些
    这篇文章主要为大家展示了“Css选择器必备知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css选择器必备知识点有哪些”这篇文章吧。CSS作用:层叠样...
    99+
    2024-04-02
  • CSS伪类选择器的知识点有哪些
    本篇内容主要讲解“CSS伪类选择器的知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS伪类选择器的知识点有哪些”吧!   伪类   &...
    99+
    2024-04-02
  • CSS选择器基本知识有哪些
    这期内容当中小编将会给大家带来有关CSS选择器基本知识有哪些,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。CSS选择器基本知识一、基本选择器序号 选择器&nbs...
    99+
    2024-04-02
  • CSS伪类选择器的知识有哪些
    这篇“CSS伪类选择器的知识有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS伪类...
    99+
    2024-04-02
  • css3选择器的基础知识点有哪些
    本篇内容主要讲解“css3选择器的基础知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3选择器的基础知识点有哪些”吧!一:属性选择器[attr=...
    99+
    2024-04-02
  • DIV+CSS规范命名的知识点有哪些
    这篇文章主要讲解了“DIV+CSS规范命名的知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DIV+CSS规范命名的知识点有哪些”吧! .编程网...
    99+
    2024-04-02
  • Css的知识点有哪些
    这篇文章主要为大家展示了“ Css的知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ Css的知识点有哪些”这篇文章吧。块元素、内联元素,是一个元素,...
    99+
    2024-04-02
  • CSS知识点有哪些
    这篇文章给大家分享的是有关CSS知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 1、对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器...
    99+
    2024-04-02
  • CSS基本用法和选择器知识有哪些
    这篇文章主要讲解了“CSS基本用法和选择器知识有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS基本用法和选择器知识有哪些”吧!一、如何使用CSS要...
    99+
    2024-04-02
  • jQuery选择符基础知识点有哪些
    这篇文章主要为大家展示了“jQuery选择符基础知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery选择符基础知识点有哪些”这篇文章吧。其实 ...
    99+
    2024-04-02
  • HTML规范知识点有哪些
    这篇文章主要介绍“HTML规范知识点有哪些”,在日常操作中,相信很多人在HTML规范知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML规范知识点有哪些”的疑惑...
    99+
    2024-04-02
  • CSS Hack的知识点有哪些
    这篇文章主要讲解了“CSS Hack的知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS Hack的知识点有哪些”吧! 一、CSS ...
    99+
    2024-04-02
  • IE与Firefox的CSS兼容知识点有哪些
    这篇文章主要讲解了“IE与Firefox的CSS兼容知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“IE与Firefox的CSS兼容知识点有哪些”...
    99+
    2024-04-02
  • Css3选择器基础知识有哪些
    这篇文章主要介绍“Css3选择器基础知识有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Css3选择器基础知识有哪些”文章能帮助大家解决问题。div > ...
    99+
    2024-04-02
  • CSS常用的知识点有哪些
    这篇文章主要讲解了“CSS常用的知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS常用的知识点有哪些”吧!一、width(宽)& he...
    99+
    2024-04-02
  • CSS标签的知识点有哪些
    这篇文章主要讲解了“CSS标签的知识点有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS标签的知识点有哪些”吧!1 如果想在网页上显示文章,这时就...
    99+
    2024-04-02
  • CSS继承的知识点有哪些
    本篇内容介绍了“CSS继承的知识点有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   属性的是否默...
    99+
    2024-04-02
  • CSS的基础知识点有哪些
    这篇文章主要介绍“CSS的基础知识点有哪些”,在日常操作中,相信很多人在CSS的基础知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS的基础知识点有哪些”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-27
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作