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. jdk（1.8）命令行工具（二）

    2.3 jinfo:java配置信息工具 jinfo(Configuration Info for Java)的作用是实时的查看和调整虚拟机的各项参数.使用jps -v 可以查看虚拟机启动时显示指定的 ...

  2. JMeter PerfMon Metrics Collector性能监控插件

    官方文档地址https://jmeter-plugins.org/wiki/PerfMon/ JMeter是一款压力测试工具,我们也可以用它来监控服务器资源使用情况. JMeter正常自带可以通过To ...

  3. leetcode-31-下一个排列

    本题目在凌应标老师的<算法设计与分析>第八次作业中出现,可供参考. 题目描述: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的 ...

  4. 2016级算法期末上机-B.简单·ModricWang's Fight with DDLs I

    1124 ModricWang's Fight with DDLs I 思路 这道题本质上就是一个多项式求值,题目中的n需要手动算一下,单位复根可以根据复数的性质来求,即\(e^{i\pi}+1=0\ ...

  5. 技巧方法 - CentOS6将Python2.6.6升级到Python2.7.6

    1.首先使用“python -V”命令查看python版本,我们测试主机显示的是2.6.6版,于是下面就着手将python2.6.6升级到Python2.7.6.python -V #查看python ...

  6. float数据在内存中存储方式

    float类型数字在计算机中用4个字节存储.遵循IEEE-754格式标准: 一个浮点数有3部分组成: 符号部分,0 表示正,1表示负. 底数部分 使用二进制数来表示此浮点数的实际值,底数部分实际是占用 ...

  7. js继承（自备水，这非常干货）

    讲js继承之前,想一想什么是继承? 生活中有很多例子,比方说继承财产,继承女朋友的前男友的前女友 ヽ(ー_ー)ノ ,这些和js继承差不多,但是有一个不一样的地方,就是继承过后,原先的人就没有了,js继 ...

  8. 51nod1965. 奇怪的式子（min_25筛）

    题目链接 http://www.51nod.com/Challenge/Problem.html#!#problemId=1965 题解 需要求的式子显然是个二合一形式,我们将其拆开,分别计算 \(\ ...

  9. 开源：我的Android新闻客户端，速度快、体积小、支持离线阅读、操作简便、内容展现形式丰富多样、信息量大、功能全面 等（要代码的留下邮箱)

    分享:我的Android新闻客户端,速度快.体积小.支持离线阅读.操作简便.内容展现形式丰富多样.信息量大.功能全面 等(要代码的留下邮箱) 历时30天我为了开发这个新闻客户端APP,以下简称觅闻 h ...

  10. 2 小时学会 Spring Boot

    一. 什么是 Spring Boot Takes an opinionated view of building production-ready Spring applications. Sprin ...