层叠样式表 (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. Mac Book安装Windows发烫的问题

    Mac Book安装Windows后,电脑发烫,风扇一直高速旋转.针对此问题百度搜索了一下, 大多数人说更改电源选项,由"平衡"模式改为"节能"模式,亲身体验了 ...

  2. php类精确验证身份证号码

    <?php // check class check{ // $num为身份证号码,$checkSex:1为男,2为女,不输入为不验证 public function checkIdentity ...

  3. 『现学现忘』Docker基础 — 38、COPY指令和ADD指令

    目录 1.COPY指令 (1)COPY指令说明 (2)COPY指令格式 (3)COPY指令使用 (4)其他 2.ADD指令 (1)ADD指令说明 (2)ADD指令格式 (3)ADD指令使用 (4)不推 ...

  4. 关于NAND FLASH解扣的认识

    NAND FLASH是现在非常重要的存储介质,根据出厂时厂家检测结果可分为原片(正片).白片和黑片. 所谓原片就是NAND FLASH生产厂商挑选出来的最好的晶圆,切割下来经过了各项测试之后封装成成品 ...

  5. NC17400 gpa

    NC17400 gpa 题目 题目描述 Kanade selected n courses in the university. The academic credit of the i-th cou ...

  6. 021（Keywords Search）（AC自动机）

    题目:http://ybt.ssoier.cn:8088/problem_show.php?pid=1479 题目思路:一道AC自动机的模板题 备注:还不会字典树和KMP的尽早回去重修 如果让你在一篇 ...

  7. RASP | 远程Java应用的RASP调试教程

    远程Java应用的RASP调试教程 介绍 Java RASP是基于Java Agent技术实现的,而Java Agent代码无法独立启动,必须依赖于一个Java运行时程序才能运行. 如何调试一个Jav ...

  8. 模拟HashMap冲突

    最近看HashMap的源码,其中相同下标容易产生hash冲突,但是调试需要发生hash冲突,本文模拟hash冲突. hash冲突原理 HashMap冲突是key首先调用hash()方法: static ...

  9. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  10. ApiDay002_02 Object中的包装类

    1.Object:对象/东西 是所有类的鼻祖,所有类都直接或间接继承了Object, 万物皆对象,为了多态 Objec中有几个经常被派生类重写的方法:toString()和equals(); 调用to ...