层叠样式表 (Cascading Style Sheets)

CSS产生缘由

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

CSS作用

样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

  • 选择器通常是您需要改变样式的 HTML 元素。
  • 每条声明由一个属性和一个值组成。
  • 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

例子：

将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

h1 {color:red; font-size:14px;}

Css外部样式引用

<head>

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

</head>

更多css内容请参考

http://www.w3school.com.cn/css/index.asp

示例：

<html>

<hand>

<title>我要自学网</title>

<!--引入Css样式-->

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

</hand>

<!--设置style样式-->

<body style="background-color:#C1FFC1"><!--颜色可参照RGB颜色表-->

<!---注释-->

<!--图片标签-->

<img src="D:\学习\selenium自动化测试\课程素材\sc1\代码\Logo.png" width=200 high="100">

<!--标题标签-->

<h1>自学网口号</h1>

<h2>自学网口号</h2>

<!--段落标签-->

<!--<br/>是换行标签-->

<!--style属性，字体，字体颜色，字体大小，文本对齐方式，多个属性用分号;间隔-->

<p style="font-family:隶书;color:red;font-size:30;text-align:center">自学成才，<br/>快速成功</p>

<p>增加收入，改变命运</p>

<p>这是一个神奇的网站，你值得拥有</p>

<!--超链接标签-->

<a href="http://www.baidu.com">百度一下</a>

<div style="background-color:yellow;height:200;width:200">

<p>这是一个div区域，分区，节</p>

<a href="http://www.w3school.com.cn/tags/index.asp">更多标签</a>

<a href="http://www.w3school.com.cn/tags/html_ref_standardattributes.asp">更多属性</a>

</div>

</body>

</html>

CssTest.css代码：

p {color:red;font-size:40}/*针对段落的样式*/

h1 {color:green}/*针对标题1的样式*/

1.7_CSS基础的更多相关文章

  1. java基础集合经典训练题

    第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...

  2. node-webkit 环境搭建与基础demo

    首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...

  3. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  5. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  6. HTTPS 互联网世界的安全基础

    近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...

  7. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  8. .NetCore MVC中的路由（1）路由配置基础

    .NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...

  9. .NET基础拾遗（5）多线程开发基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...

随机推荐

  1. camunda流程引擎概念术语

    前言 本文重点介绍开源流程引擎camunda的核心概念,这些概念同样适用于JBMP.Activiti.Flowable流程引擎,了解这些基本概念和原理,使用流程引擎API将更得心应手. 一.Proce ...

  2. php三行代码解决输入地址给出经纬度

    //获取地址经纬度坐标 public function getAddress() { $ak = 'GPIrsdfZ-UNLRP-VBBDB-V3AGK-XL5KO-5DBNY'; $address  ...

  3. Linux常用操作:文件及文件夹

    一.创建 (1)mkdir 创建一个目录 (2)touch 创建一个空文件 注:-r 表示递归操作 二.删除 rm 删除文件 rm -r 删除目录 rm -r * 删除目录下的所有文件 注:-f 不用 ...

  4. 实现领域驱动设计 - 使用ABP框架 - 存储库

    存储库 Repository 是一个类似于集合的接口,领域层和应用程序层使用它来访问数据持久性系统(数据库),以读写业务对象(通常是聚合) 常见的存储库原则是: 在领域层定义一个存储库接口(因为它被用 ...

  5. python素描照片

    #!/usr/bin/python # -*- coding: utf-8 -*- from PIL import Image import numpy as np a = np.asarray(Im ...

  6. 攻防世界pwn题：Recho

    0x00:查看文件信息 一个64位二进制文件,canary和PIE保护机制没开. 0x01:用IDA进行静态分析 分析:主程序部分是一个while循环,判断条件是read返回值大于0则循环.函数ato ...

  7. NC15052 求最值

    NC15052 求最值 题目 题目描述 给你一个长为 \(n\) 的序列 \(a\) 定义 \(f(i,j)=(i-j)^2+g(i,j)^2\) \(g\) 是这样的一个函数 求最小的 \(f(i, ...

  8. 讲给测试人员的docker知识

    docker对测试来说有什么用 docker类似于Windows系统的虚拟机,对于测试来说docker意味着一种新的测试环境部署方式,由于其镜像分层的设置,我们可以在一台物理机上同过docker的方式 ...

  9. ELK 日志分析系统的部署

    一.ELK简介 ElasticSearch介绍Elasticsearch是一个基于Lucene的搜索服务器. 它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口. Elasti ...

  10. Excel用户如何打破内卷？只需要一个新软件，就能突破excel天花板

    还在死磕Excel吗?到底值不值得? 你看看,现在有多少excel培训班和培训课?网上各种EXCEL使用技巧教程也是满天飞.很多人为了提升Excel技能,不遗余力学习各种函数用法.VBA用法等等,最近 ...