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. jscover使用说明-总体说明

    1.总体说明 这个文档现在是完善和准确的,不管怎样,尽量去参考JSCoverage documentation. 1.1.介绍 JSCove是一个用来显示JavaScript项目代码覆盖率的工具,它是 ...

  2. day 02 ---class - homework

    # -*- coding: utf-8 -*-# @Time : 2018/12/20 14:34# @Author : Endless-cloud# @Site : # @File : day 02 ...

  3. knova绘制矩形

    效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. canvas+js绘制序列帧动画+面向对象

    效果: 素材: 源码:(一般的绘制方式) <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. LeetCode一句话题解

    深度优先搜索 人生经验 1. 需要输出所有解.并由于元素集有重复元素,要求返回的结果需要去重的情况,可考虑使用值对应数量的map,然后分别考虑依次取不同数量该值的可能. LeetCode39 题目:给 ...

  6. 微信内置的浏览器window.location.href 跳转不兼容问题

    1.不兼容苹果手机---->>>>使用模拟触发a标签 <a id="alink" href="http://www.baidu.com&qu ...

  7. 通过数据库绑定的dropdownlist，如何让其第一条默认显示"--请选择--"

    第一种方法 DropDownList1.Items.Insert(0,"请选择XXX"); 第二种方法 在第一个位置插入一个项就可以 DropDownList1.Items.Ins ...

  8. Java类文件结构及javac的ClassReader类解读

    首先来看一下ClassFile,类注释如下: A JVM class file. Generic Java classfiles have one additional attribute for c ...

  9. vue测试安装和配置

    npm install --save-dev @vue/test-utils mocha mocha-webpack npm install --save-dev jsdom jsdom-global ...

  10. js Array vs []，以及是否为空的判断

    两者基本相同,唯一不同点在于初始化: var a = [], // these are the same b = new Array(), // a and b are arrays with len ...