一、CSS简介
  • 介绍

css我们称呼层叠样式表(英文全称:Cascading Style Sheets)。它是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。如果html是一个人,那么CSS就相当于衣服,有了它我们可以让HTML样式丰富多彩。

  • 语法

css语法主要由两部分组成:选择器和声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

selector  {
property1:value1
property2:value2  
……
}
  • 存在方式

元素内联:直接在标签中使用CSS

demo:

<body>
<div style="background-color: red ;height: 30px"></div>
</body>
</html>

页面嵌入:通过在head标签中定义,提供后续使用

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<style>
p{
background-color: aqua ;
height: 20px;
}
div{
background-color: red;
height: auto;
}
</style>
</head>
<body>
<div>wd</div>
<p>name</p>
<!--head中定于了p、div标签的样式,body中所有的div和p都会引用到其样式-->
</body>
</html>

外部引入:通过外部文件,是head标签中使用link引入,本质引入都是一样。

<head>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>

<link> 标签定义文档与外部资源的关系,他最常见的用途是链接样式表,仅能出现在<head>标签中。
<link>标签的常用属性:
  href: URL 指定被连接文档的地址
  type:MIME_type 指定被连接文档的MIME类型
  rel:有很多值(详见下图) 指定当前文档与被链接文档的关系

  • CSS样式注释
/*代码块*/
/*.c1{

    height: 30px;
}*/
二、CSS选择器

分类:

  • 元素选择器
  • id选择器
  • class选择器

1.标签选择器

通过不同的标签定义选择器,如p、div、span、hr、table等等,只要定义了元素选择器,所有该标签都会引用定义的样式

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<style>
p{
background-color: aqua ;
height: 20px;
}
div{
background-color: red;
height: auto;
}
</style>
</head>
<body>
<div>wd</div>
<p>name</p>
<!--head中定于了p、div标签的样式,body中所有的div和p都会引用到其样式-->
</body>
</html>

2.id选择器

通过使用#+名字定义样式,引用使用id=“名字”引用该样式。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello wd</title>
<style>
#i1{
background-color: red;
height: 50px;
}
</style>
</head>
<body>
<div id="i1">python</div>
<!--引用i1中的样式-->
</body>
</html>

3.class选择器

通过.+名字定义,使用class=“名字”来引用样式

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello wd</title>
<style>
#i1{
background-color: red;
height: 50px;
}
</style>
</head>
<body>
<div id="i1">python</div>
<!--引用i1中的样式-->
</body>
</html>

选择器组合:

选择器有多种,通过不同的组合方式能达到我们想要的样式,常用的选择器组合:

  • 层级选择器(空格间隔)
  • 分组选择器(逗号间隔)
  • 属性选择器(中括号)

1.层级选择器(空格间隔)

层级选择器以空格间隔,用于多层标签嵌套而给嵌套中的某个标签应用样式,如div span{ },只会应用div嵌套的span标签,.c1 span{ }只会应用于class=‘c1’下面包裹的span标签。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
background-color: aquamarine;
height: auto;
}
</style>
</head>
<body>
<div>
<div>wd</div>
<span>name</span>
<!-- div下的span只有name,所有name会被应用div span{ }样式-->
</div>
</body>
</html>

2.分组选择器(逗号间隔)

分组选择器(组合选择器),以逗号间隔,表示在这个组合中的任何选择器都应用该样式。例如.c1,#c2,div{ },表class=‘c1’或者id="c2"或者div标签都应用此样式。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,span{
background-color: aquamarine;
height: auto;
}
</style>
</head>
<body>
<div class="c1">
<div>wd</div>
<span>name</span>
</div>
</body>
</html>

3.属性选择器

属性选择器通过属性+[k='value']形式定义,其中属性k="value"可以自己定义也可以使用标准属性,如input[type="text"]{ },会应用于<input type=”text“>,也可以是.c1[n="wd"]{ }

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]{
background-color: aquamarine;
height: auto;
}
</style>
</head>
<body>
<input type="text">
<!-- 只会应用type="text"的input标签-->
<input type="checkbox">
</body>
</html>
  • css优先级

当一个标签使用了多个样式的时候,CSS有一定的优先级,若在标签中直接定义style则优先使用,若没有定义,优先级与在head中定义的顺序有关,越往下越优先(就近原则)。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.c1{ background-color: red ;height: 20px}
.c2{ background-color: darkblue;height: 30px} </style>
</head>
<body>
<div class="c1 c2" style="background-color: chartreuse"></div>
<!--这里应用style="background-color: chartreuse样式-->
<div class="c2 c1" ></div>
<!--这里应用head中最下面的c2样式-->
</body>
</html>

前端之CSS介绍--选择器的更多相关文章

  1. CSS介绍&选择器&选择器优先级

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...

  2. 前端之CSS介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS的语法 CSS语 ...

  3. 2020年12月-第02阶段-前端基础-CSS基础选择器

    CSS选择器(重点) 理解 能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的 ...

  4. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  5. 【WEB前端】CSS常用选择器

    1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...

  6. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  7. day041 前端HTML CSS基本选择器(未整理完毕)

    标签: <b> :加粗 <i> :倾斜体 <u>: 下划线 <s>: 删除线 <p>:段落 <h1> - <h6> ...

  8. 前端之CSS初识

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. 前端学习之路-CSS介绍,Html介绍,JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

随机推荐

  1. 第九章 BootstrapTable的使用

    一.简介 BootstrapTable是一个Bootstrap 3 的表格插件,支持单选, 复选框, 排序, 分页等功能 官网:http://bootstrap-table.wenzhixin.net ...

  2. 关于SPF记录的说明

    详细了解SPF记录的可以查看一下这篇博文:http://www.renfei.org/blog/introduction-to-spf.html 关于 SPF SPF:Sender Policy Fr ...

  3. 《Python cookbook》 “定义一个属性可由用户修改的装饰器” 笔记

    看<Python cookbook>的时候,第9.5部分,"定义一个属性可由用户修改的装饰器",有个装饰器理解起来花了一些时间,做个笔记免得二刷这本书的时候忘了 完整代 ...

  4. HTML、CSS、JS 复习——序

    HTML在MVC中担任着M的角色.由HTML组成的节点称之为HTML DOM.要想成为一流的大神,就必须能分分钟建立起一个强大的HTML DOM.而要做到这点,就必须了解甚至精通HTML. CSS在M ...

  5. Hibernate学习笔记(4)---hibernate的核心接口

    Configuration类 该类主要是读取配置文件,启动hibernate,并负责管理hibernate的配置信息,一个程序只创建一个Configuration对象. Configuration类操 ...

  6. 自学Aruba1.4-WLAN厂家魔力象限

    点击返回:自学Aruba之路 1.4 自学Aruba1.4-WLAN厂家魔力象限 以下为2017<有线和无线局域网接入基础设施的魔力象限>报告:      Aruba.cisco为无线领域 ...

  7. ActiveMQ进阶学习

    本文主要讲述ActiveMQ与spring整合的方案.介绍知识点包括spring,jms,activemq基于配置文件模式管理消息,消息监听器类型,消息转换类介绍,spring对JMS事物管理. 1. ...

  8. 开启 TLS 1.3 加密协议,极速 HTTPS 体验

    随着互联网的发展,用户对网络速度的要求也越来越高,尤其是目前在大力发展 HTTPS 的情况下,TLS 加密协议变得至关重要.又拍云在 HTTPS 的普及和性能优化上,始终做着自己的努力和贡献.2018 ...

  9. .net 平台下, Socket通讯协议中间件设计思路(附源码)

    .net 平台下,实现通讯处理有很多方法(见下表),各有利弊: 序号 实现方式 特点 1 WCF 优点:封装好,方便.缺点:难学,不跨平台 2 RocketMQ,SuperSocket等中间件 优点: ...

  10. if与while相互嵌套,菱形*的实现.py

    """    *           * *         * * *       * * * *     * * * * *     * * * *       * ...