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. java中的jdk配置详解：

    1.配值系统变量"JAVA_HOME" 变量名JAVA_HOME: 指向:JDK(java开发工具包)的安装路径 目的:使用JDK安装目录时,可以直接通过”%JAVA_HOME%“ ...

  2. 编程开发之--java多线程学习总结（5）

    4.对继承自Runnable的线程进行锁机制的使用 package com.lfy.ThreadsSynchronize; import java.util.concurrent.locks.Lock ...

  3. win10 安装 mysql 5.7

    win10 安装 mysql 5.7 1.在mysql 官网下载mysql 5.7 的手动安装包 mysql--winx64.zip 2. 解压到mysql 目录的文件夹下面 D:\moudle\my ...

  4. Java NIO学习与记录（二）：FileChannel与Buffer用法与说明

    FileChannel与Buffer用法与说明 上一篇简单介绍了NIO,这一篇将介绍FileChannel结合Buffer的用法,主要介绍Buffer FileChannel的简单使用&Buf ...

  5. [转] String to Date conversion in hive - 在 Hive 中各种字符串转换成日期格式

    [From] http://bigdataprogrammers.com/string-date-conversion-hive/ Please refer below table to conver ...

  6. Mac下安装eclipse（Mac 10.12/JDK/tomcat）

    1.到官网https://www.eclipse.org/downloads/eclipse-packages/下载安装包 2.安装 注意:安装ecllipse时一定要安装JDK先,最新版本的ecli ...

  7. Java Service Wrapper简介与使用（转）

    本文转自https://www.cnblogs.com/zcy_soft/p/3738947.html,写的非常好,珍藏一下 1. wrapper的意思? wrapper在此处理解为“包装”. 2. ...

  8. Springsecurity搭建自定义登录页面

    1.springSecurity的搭建 新建一个springboot的web项目,我这边只选中了web,建立后如下: pom依赖: <!-- https://mvnrepository.com/ ...

  9. 《Algorithms算法》笔记：元素排序(4)——凸包问题

    <Algorithms算法>笔记:元素排序(4)——凸包问题 Algorithms算法笔记元素排序4凸包问题 凸包问题 凸包问题的应用 凸包的几何性质 Graham 扫描算法 代码 凸包问 ...

  10. Maven项目中Spring整合Mybatis

    Maven项目中Spring整合Mybatis 添加jar包依赖 spring需要的jar包依赖 <dependency> <groupId>org.springframewo ...