CSS基础

什么是CSS

简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。

CSS发展历史

  1. 1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。
  2. 1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。
  3. 2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。
  4. 2010年 CSS 3.0 规范推出，将 CSS3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等模块。

CSS使用方式

行内样式

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>This is title</title>

    </head>

    <body>

        <p style="font-size: 16px; color: red;">My cat is very grumpy</p>

    </body>

</html>

行内样式需要写到标签的 style 属性值中。

内部样式表

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>This is title</title>

        <style>

            p {

                font-size: 16px;

                color: red;

            }

        </style>

    </head>

    <body>

        <p>My cat is very grumpy</p>

    </body>

</html>

内部样式需要写到 <style> 标签中。

外部样式表

  • 链接式

将样式写到单独的文件中，文件的扩展名为 .css。例如，index.css 文件中有如下样式：

p {

    font-size: 16px;

    color: red;

}

然后通过 <link> 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>This is title</title>

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

    </head>

    <body>

        <p>My cat is very grumpy</p>

    </body>

</html>
  • 导入式

创建 style1.css 文件，文件中有如下样式：

/* style1.css */

h1 {

    font-size: 32px;

    color: green;

}

创建 style2.css 文件，并使用 @import 指令将 style1.css 导入到 style1.css 文件中：

/* style2.css */

p {

    font-size: 16px;

    color: red;

}

最后，通过 <link> 元素将 style2.css 文件引入到页面中：

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>This is title</title>

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

    </head>

    <body>

        <h1>一级标题</h1>

        <p>My cat is very grumpy</p>

    </body>

</html>

定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

CSS基本语法

CSS 样式由一系列的规则集组成，规则集中有一条或多条样式声明，每条样式声明包含着一对属性名和属性值，属性名和属性值之间以冒号（:）隔开，样式规则之间以分号（;）隔开，最后一对样式声明后面可以省略分号。

基本选择器

标签选择器

p {

    font-size: 16px;

    color: red;

}

选择页面中所有的 <p> 元素，给它们设置字体大小和颜色。

Class 选择器

.box {

    font-size: 20px;

    color: green;

}

选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

ID 选择器

#nav {

    font-size: 24px;

    color: blue;

}

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。

通配符选择器

* {

    font-size: 24px;

    color: blue;

}

样式的优先级

  1. 行内样式的优先级最高

  2. 选择器的优先级根据权重计算

选择器 ID选择器 Class选择器 标签选择器 总权重
html body header h1 0 0 4 4
.page-header .title 0 2 0 20
#page-title 1 0 0 100

属性选择器权重与类相同，+ > ~ 权重为 0

  1. 在选择器权重相同的情况下，遵循就近原则，也就是说，谁距离目标元素近，应用哪个个样式。

  2. 使用 !important 声明调整样式的优先级

样式的来源

共有三种主要的样式来源：

  • 浏览器对HTML定义的默认样式。
  • 用户定义的样式。
  • 开发者定义的样式。

特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅

html和css入门 （二）的更多相关文章

  1. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  2. CSS入门(二)

    一.组合选择器 每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器 可以一次性控制多个选择器 选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代 ...

  3. day 31 html(二) 和css入门

    前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门 一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...

  4. HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO

    上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...

  5. H5教程（二），CSS入门（一）选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  6. 第六十九节，css入门基础

    css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...

  7. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  8. 2.Python爬虫入门二之爬虫基础了解

    1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...

  9. Python爬虫入门二之爬虫基础了解

    1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...

  10. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

随机推荐

  1. MySql环境变量配置

    配置环境变量 前面步骤完成后安装好MySQL,为MySQL配置环境变量.MySQL默认安装在C:\Program Files下. 1)新建MYSQL_HOME变量,并配置:C:\Program Fil ...

  2. 解决self.encoding = charset_by_name(self.charset).encoding

    解决self.encoding = charset_by_name(self.charset).encoding def createMysqlTable(tablename): # config = ...

  3. P4090 [USACO17DEC]Greedy Gift Takers

    题目链接 题意分析 首先 如果当前序列中一头奶牛拿不到礼物的话 那么他后面的奶牛也拿不到礼物 所以我们可以二分 由于可以操作无限次 所以我们对于当前\([1,mid)\)的奶牛按照\(c\)值排序之后 ...

  4. P3698 [CQOI2017]小Q的棋盘

    题目链接 题意分析 首先 我们肯定会贪心的走从根节点到叶子结点最长的一条链 首先没有过剩的就好办了 但是有的话 我们就一边往下走 一边走分支 分支上每一个点平均走过两次 所以我们把剩下的除以\(2\) ...

  5. Linux磁盘分区、挂在

    分区基础知识分区的方式:1) mbr分区:1.最多支持四个主分区2.系统只能安装在主分区3.扩展分区要占一个主分区4.MBR最大只支持2TB,但拥有最好的兼容性2) gtp分区:1.支持无限多个主分区 ...

  6. server端获得到client端的IP地址的格式

    使用telnet,ping或其他client连接server端时,server端获得的client端的ip地址取决于client端使用的时ipv4还是ipv6地址. 例: client IPv4地址: ...

  7. Mac 10.12安装Command+Q误按提示工具

    说明:很多时候不小心会按强制关闭而无任何提示,这款工具能延迟关闭,并有相应的提示. 下载: (链接: https://pan.baidu.com/s/1bpyJMPL 密码: bqn1)

  8. java翻译到mono C#实现系列(4) 利用CountDownTimer类实现倒计时功能 mono版

    群里的朋友问利用CountDownTimer类实现倒计时功能怎么实现,我就百度了,参考http://blog.csdn.net/qq344429461/article/details/7521361写 ...

  9. nginx故障分析与记录

    本文是对于自己遇到nginx故障的一些记录.便于以后解决问题. 时间:2018_05_11 场景一:某天很多客户在群里反应说访问网站不了,报504错误. 环境:首先说明一点的就是公司网站是美国,日本等 ...

  10. JMS、AMQP和MQTT主要特性

    今天无意中看到mq的原理,才发现activeMq与ribbMq的原理是不一样的.前者是JMS的实现,后者是AMQP的实现... 原理简介:https://www.cnblogs.com/zhangyu ...