层叠样式表 (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. 【物联网串口服务器通信经验教程】Modbus网关协议转换

    在前面的文章中,我们已经详细地介绍了Modbus网关的几种主要类型,今天,就让我们来介绍一下其中简单协议转换的处理过程. 简单协议转换是最常规.最普遍的Modbus网关功能,也是数据处理效率最高Mod ...

  2. Charles如何抓取https请求-移动端+PC端

    Charles安装完成,默认只能抓取到http请求,如果查看https请求,会显示unkonw或其它之类的响应.所以需要先进行一些配置,才能抓取到完整的https请求信息.下面针对PC端和手机端抓包的 ...

  3. 【Srping】事务的执行原理（一）

    在使用事务的时候需要添加@EnableTransactionManagement注解来开启事务,那么就从@EnableTransactionManagement入手查看一下事务的执行原理. @Enab ...

  4. 《ECMAScript 6 入门》【三、字符串的扩展】（持续更新中……）

    前言: 本篇介绍 ES6 对字符串的改造和增强.一.字符的 Unicode 表示法 字符的 Unicode 码点必须在\u0000~\uFFFF之间,\uxxxx形式表示一个字符,其中xxxx表示字符 ...

  5. SAP创建XML 文件

    TYPES: BEGIN OF xml_line_type, data(256) TYPE x, END OF xml_line_type, xml_tab_type TYPE TABLE OF xm ...

  6. babeljs源码

    babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...

  7. js 表面学习 - 认识结构

    JavaScript 语句由以下构成: 值.运算符.表达式.关键词和注释. 这条语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello Kitty. ...

  8. Linux系统安全配置

    1.物理安全 硬件服务器,关闭从CD/DVD等这些方面的软启动方式.同时也可以设置BIOS密码,并且要有限制访问的策略与各类流程管控. 还可以禁用USB设备来达到安全的目的: centos7x 安装d ...

  9. docker实时查看日志

    docker logs -f --tail=10 fo-order -f : 查看实时日志 --tail=10 : 查看最后的10条日志. fo-order: 容器名称

  10. NC16561 [NOIP2012]国王的游戏

    NC16561 [NOIP2012]国王的游戏 题目 题目描述 恰逢 H 国国庆,国王邀请 \(n\) 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上 ...