CSS初识

CSS(Cascading Style Sheets)通常被称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。它就是包含一个或多个规则的文本文件。

构造规则

样式表的每个规则都有两个部分，即选择器(selection)和声明(declaration)。

注意

  1. 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
  2. 属性和属性值以“键值对”的形式出现。
  3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
  4. 属性和属性值之间用英文“:”连接。
  5. 多个“键值对”之间用英文“;”进行区分。

我们也可以在样式规则中用/*注释内容*/语法来注释内容。另外，样式会被该元素的后代继承，不过浏览器在解析代码时，只会解析离它最近的样式。

样式表的定义和使用

行内式（内联样式）

基本语法：

<label style="样式属性:属性值;样式属性:属性值;···">

内部样式表

基本语法：

<head>

<style type="text/CSS">

    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

外部样式表（外链式）

基本语法：

<head>

  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />

</head>

说明：

  • type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表
  • rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
  • link：该标签是一个单标签

或者：

<style type="text/css">

	@import url("外部样式表的文件名称")

</style>

选择器

标签选择器（元素选择器）

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

不过我们必须在标签里面如下定义：

<label class="类名"></label>

id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

不过我们也要在标签里面如下定义：

<label id="id名"></label>

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

链接伪类选择器

  • :link：未访问的链接
  • :visited：已访问的链接
  • :hover：鼠标移动的链接上
  • :active：选定的链接
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    a:hover{

        color: red;

    }

</style>

<body>

<a href="http://www.baudu.com/">百度</a>

</body>

</html>

结构（位置）伪类选择器

  • :first-child:选取属于其父元素的首个子元素的指定选择器
  • :last-child:选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n)： 匹配属于其父元素的第 N 个子元素，不论元素的类型
  • :nth-last-child(n)：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

复合选择器

交集选择器

我们直接把需要交集的选择器连在一起，如：

<style>

	p.class#id{

        ...

	}

</style>

并集选择器

在选择器的中间加上逗号：

<style>

	p,.class,#id{

        ...

	}

</style>

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

<style>

	p .class #id{

        ...

	}

</style>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 >进行连接，注意，符号左右两侧各保留一个空格。

<style>

	.demo > h3 {color: red;}

</style>

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

/* 获取到 拥有 该属性的元素 */

div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */

			color: pink;

		}

div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */

			color: skyblue;

		}

div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */

			color: green;

		}

伪元素选择器

  • E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
  • E::first-line文本第一行；
  • E::selection可改变选中文本的样式；
  • E::before和E::after：在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用；

标签选择模式

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

特点：

  • 独占一行
  • 高度，行高、外边距以及内边距都可以控制
  • 宽度默认是容器的100%
  • 可以容纳内联元素和其他块元素

行内元素(inline-level)

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

特点：

  • 和其他行内元素会在一行
  • 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或则其他行内元素。（a特殊）

行内块元素（inline-block）

在行内元素中有几个特殊的标签如<img>、<input>、<td>，可以对它们设置宽高和对齐属性，我们称它们为行内块元素。

特点：

  • 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙
  • 默认宽度就是它本身内容的宽度
  • 高度，行高、外边距以及内边距都可以控制

标签显示模式转换display

  • display:inline：块转行内
  • display:block：行内转块
  • display: inline-block：块、行内元素转换为行内块

CSS三大特性

层叠性

这是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

优先性

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

特殊性(Specificity)

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

且数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值为 0,0,0,1
每个类，伪类贡献值为 0,0,1,0
每个ID贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 无穷大

优先总结：

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则

css基本介绍的更多相关文章

  1. 3、CSS基本介绍

    1.1 CSS基本介绍一.web 标准所谓的web标准指的就是一系列规范网页书写的要求,它是由W3C组织制定,在它里面要求网页的结构.样式.行为三者相分离.二.名词解释1.结构:就是通过HTML标签搭 ...

  2. 常用前端布局，CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  3. CSS基础介绍

    CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法 1. 首先选择一个属性 2. 选择了属性以后,用大括号括起来 3. 括号里面是对应的属性和属性值,如: select ...

  4. 二、CSS 基本介绍

    [ 显示目录 ] [ 隐藏 ] 目录 基本概念 CSS组成部分 CSS的规则 引入CSS样式的方法 颜色的表示 CSS Reset 选择器分类 浮动 盒子模型 box-sizing属性 实例:实现“田 ...

  5. CSS入门介绍

    一.背景 这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出. ...

  6. 前端部分-CSS基础介绍

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.也就是定义相应的标签语言来定制显示样式达到一定的显示效果. 每个CSS样式由两个组成部分:选择器和 ...

  7. CSS 的介绍

    第一章 的介绍 1.CSS:“层叠样式表”,它是cascading style sheets的缩写,作用就是给HTML标签加表现形式(样式-显示),如:字体,图片,列表,位置等. 在浏览器中可以看到部 ...

  8. css样式介绍

    1 css之选择器 1.1 基本选择器 1.2 组合选择器 E,F      多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔:div,p { color:#f00; } E F     ...

  9. 百万年薪python之路 -- 前端CSS基础介绍

    一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...

  10. Html/CSS 初步介绍html和css部分重要标签

    &初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...

随机推荐

  1. jquery mobile 建wap站

    使用jquery mobile 建手机wap站: 几篇比较好的文章 http://wap.yesky.com/dev/225/30974725.shtml http://tech.it168.com/ ...

  2. 以写作为例说下IT人如何培养挣钱DNA

    洛克菲勒说:“如果把我剥得一文不名丢在沙漠的中央,只要一行驼队经过——我就可以重建整个王朝.”这话反过来可以这样说,方法不对路,也不肯干的人,哪怕给一笔财富(比如人生小目标一个亿),最好的结果是跑赢C ...

  3. 初探Parcel

    昨天趁有点时间看了前不久很火的构建工具Parcel,这里说下初步使用的感受,尤其是将其放到实际项目中和Webpack进行比较. 一.前言 首先说下笔者目前的技术栈.最近的前端项目主要以管理后台为主,技 ...

  4. Redis协议规范(RESP)

    Redis 即 REmote Dictionary Server (远程字典服务): 而Redis的协议规范是 Redis Serialization Protocol (Redis序列化协议) 该协 ...

  5. .net 配置swagger

    第一步: 在nuget.org中查找Swashbuckle并下载 在nuget.org中查找Swagger.net.UI,并下载 第二步: 下载完之后,App_Start多了三个文件 Swagger. ...

  6. C#打印模板设计，E店宝打印模板设置，winfrom打印模板设计，DevExpress.XtraReports.UI.XRTable 表格代码生成。

    一.打印效果 二.代码编辑 1 .table1 : table控件的Name: 2.label33 :label控件 实现绑定[外部平台单号]的控件: 3.label32:绑定[E店宝订单编号](S开 ...

  7. lock了mutex的线程退出了却没有unlock时会怎么样？

    https://stackoverflow.com/questions/4424193/what-happens-to-mutex-when-the-thread-which-acquired-it- ...

  8. Netty 核心内容之 编解码器

    原文链接 Netty 核心内容之 编解码器 代码仓库地址 编解码器 我认为Netty 最棒的一点就是Netty 设计的编解码链,这一优秀的设计,可以很方便的实现二进制流->ByteBuf-> ...

  9. 深圳市共创力咨询CEO杨学明的最新演讲：互联网模式下的企业创新管理

    2018年11月14日, 深圳市共创力咨询董事长.深圳市汇成研发管理咨询公司董事长杨学明先生受邀参加由深圳图书馆主办,深圳手讯视频承办的“倾听行业之声”2018第二届世界CED智慧大会,此次分享的主题 ...

  10. Jmeter使用JDBC请求简介

    1.现在oracle或mysql的jdbc然后放到jmeter的lib路径下 2.添加jdbc默认请求控件. 3.添加jdbc请求 4.发送 5.出现ORA-00911错误是由于sql语句错误,注意别 ...