CSS基础

什么是CSS

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

CSS发展历史

1996年 CSS 1.0 规范面世，其中加入了字体、样色等相关属性。
1998年 CSS 2.0 规范推出，这个版本的 CSS 也是最广为人知的一个版本。
2004年 CSS 2.1 规范推出，对 CSS 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。
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;

}

样式的优先级

行内样式的优先级最高
选择器的优先级根据权重计算

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

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

在选择器权重相同的情况下，遵循就近原则，也就是说，谁距离目标元素近，应用哪个个样式。
使用 !important 声明调整样式的优先级

样式的来源

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

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

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

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

css入门二-常用样式
css入门二-常用样式总结基本标签样式背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
CSS入门(二)
一.组合选择器每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器可以一次性控制多个选择器选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代 ...
day 31 html(二) 和css入门
前情提要: 本次主要是继续昨天学的简单的html 补充以及 css的简单入门一:表单标签 >1:get请求 <!DOCTYPE html> <html lang=" ...
HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
H5教程（二），CSS入门（一）选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
第六十九节，css入门基础
css入门基础学习要点: 1.使用CSS 2.三种方式 3.层叠和继承本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一使用CSS CSS ...
【Python全栈-CSS】CSS入门
CSS入门教程参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
2.Python爬虫入门二之爬虫基础了解
1.什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...
Python爬虫入门二之爬虫基础了解
1.什么是爬虫爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓取下来.想抓取什么?这个由你来控制它咯. ...
【干货】Html与CSS入门学习笔记4-8
四.web镇之旅,连接起来找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

随机推荐

IECapt、CutyCapt 生成网页快照
IECapt.CutyCapt 生成网页快照 http://iecapt.sourceforge.net/ http://cutycapt.sourceforge.net/ 1.以管理员身份运行c ...
【Quartz】解密properties配置文件中的账号密码
在配置quartz时,为了保密某些信息(特别是账号密码),通常会使用密文.那么在实际使用这些配置信息时,需要进行解密.本文提供一种解密方法如下: (1)假设在properties文件中加密了账号密码 ...
WampServer访问出现403forbidden的问题解决
1,软件装上以后出现所有服务运行,80端口未被占用的情况下服务器一直处于离线状态解决方案如下: 网络上面很多教程多说切换服务器为在线状态即可,但是我发现我的菜单里面并没有,用命令又嫌麻烦在图表上面 ...
问题 C: 调酒壶里的酸奶广搜或深搜+记忆化搜索
问题 C: 调酒壶里的酸奶时间限制: 1 Sec 内存限制: 128 MB提交: 284 解决: 97[提交] [状态] [命题人:外部导入] 题目描述最近小w学了一手调酒的技巧,这么帅的操作 ...
phpqrcode实现二维码（含图片）
---恢复内容开始--- 1,http://phpqrcode.sourceforge.net/ 下载 2,解压以后只需要一个文件 3,原生php测试: <?php include 'phpqr ...
codeblocks c++ 编译出错
codeblocks编译出错今天编译一个c++程序调用模板的时候,出现错误 error This file requires compiler and library support for the ...
javac文件系统
1.文件 Java编译器在编译的过程中会涉及到对各种文件的搜索和查找,例如在文件夹下搜索.java源在压缩包*.jar内搜索.class文件,同时也会将编译生成的二进制文件写入文件.Java编译器有自 ...
docker私有仓库搭建及认证
什么是docker? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机 ...
AES加密的四种模式详解
对称加密和分组加密中的四种模式(ECB.CBC.CFB.OFB) 一. AES对称加密: A ...
CPU漏洞补丁修复导致KeServiceDescriptorTable获取变更
一.前言 2018年元旦,出现的cpu的漏洞,可以在windows环三直接读取内核数据,windows对该漏洞提供补丁,补丁增加了一个页表,对应的内核处理也增加了,接下来我们看下补丁修复的表象以及对K ...

html和css入门 （二）