前端之CSS介绍--选择器

一、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>

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介绍--选择器的更多相关文章

CSS介绍&选择器&选择器优先级
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...
前端之CSS介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS的语法 CSS语 ...
2020年12月-第02阶段-前端基础-CSS基础选择器
CSS选择器(重点) 理解能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如一只眼睛的一组,剩下的 ...
Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...
【WEB前端】CSS常用选择器
1.1 标签选择器就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...
前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
day041 前端HTML CSS基本选择器(未整理完毕)
标签: <b> :加粗 <i> :倾斜体 <u>: 下划线 <s>: 删除线 <p>:段落 <h1> - <h6> ...
前端之CSS初识
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式利用标签中的style属性来改变显示样式 & ...

随机推荐

strace命令详解
转自: http://www.cnblogs.com/ahuo/p/4150623.html 备注: 这篇博文学到的不仅仅是 strace 这个命令,还有前辈的排错思路,致敬! strace 命令是一 ...
[js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展trim,trimLeft,trimRight方法(2)
我们接着上一篇的继续,在上一篇我们完成了工具库的架构,本文扩展字符串去空格的方法, 一共有3个 1,trimLeft: 去除字符串左边的空格 2,trimRight: 去除字符串右边的空格 3,tri ...
Nginx集群之WCF分布式局域网应用
目录 1 大概思路... 1 2 Nginx集群WCF分布式局域网结构图... 1 3 关于WCF的BasicHttpBinding. 1 4 编写WC ...
java的static关键字 – Break易站
本文内容来自:java的static关键字 – Break易站 (原文网站阅读体验更好) 通过static关键字可以满足两方面的需要.一种情形是,只想为某特定域分配单一存储空间,而不去考虑究竟要创建多 ...
Emmet for Dreamweaver 整理分享
我是一名技术不是很到位的前端,每次做项目总要写大量的HTML和CSS,耳边经常听到的是快.快点.再快点!我真想说快你妹!但是,我不得不承认的是:我只有两只手... 后来,在群里看到有人分享了一个连接大 ...
linux下的磁盘挂载
将新的磁盘安装在服务器上后,怎么挂载到现在的服务器上呢? 1.查询是否已经分配磁盘 fdisk -l 这里因为测试,只是挂载了10G的硬盘 2.发现有磁盘/dev/sdb.然后使用fdisk命令建立分 ...
Java学习笔记18---final关键字修饰变量、方法及类
英语里final这个单词大家都知道是"最终的"意思,其实还有一个意思是"不可更改的".在Java里,final关键字作"不可更改的"来解释更 ...
Linux上leveldb的安装和使用
1.首先从官网上下载leveldb进行编译 git clone https://github.com/google/leveldb.git cd leveldb make 2.将头文件和动态链接库拷到 ...
linked lists in .NET
链表是数据结构中存储数据的一种形式.分为单向链表和双向链表以及循环链表.LinkedList是泛型链表,用节点存取,节点类型为LinkedListNode<T>,每个节点都有Next和Pr ...
5大UX设计谬论，如何去补救？
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 每个新项目都是从学习开始的. 就像设计师需要了解一个特定的客户和他们的设计目标一样,客户需要了解设 ...

前端之CSS介绍--选择器

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

随机推荐

热门专题