层叠样式表 (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. element-ui table组件使用v-if时的问题

    element-ui项目中经常遇到需要使用v-if指令来根据情况动态显示隐藏某些列情况,这时就会出现滚动条样式异常.列错乱.列宽错乱等问题 解决办法:在el-table上添加:key="Ma ...

  2. 2021.05.05【NOIP提高B组】模拟 总结

    T1 给你一棵树,要求增加最少的边权是的从根到每一个叶子的长度相等 不能改变原有的最大长度 这是一个贪心:尽可能往深度小的边增加 先预处理出 \(mx_i\) 表示从 \(i\) 到叶子的最大长度 然 ...

  3. 一文掌握软件安全必备技术 SAST

    上一篇文章中,我们讨论了软件供应链的概念并了解到近年来软件供应链安全事件层出不穷.为了保障软件供应链安全,我们需要了解网络安全领域中的一些主要技术.本篇文章将介绍其中一个重要技术--SAST. 当开发 ...

  4. 眼球3D可视化解决方案——案例详解

    医疗器械行业伴随着人类健康需求的增长而不断发展,是名副其实的朝阳行业,也是全球发达国家竞相争夺的领域. 一方面,行业门槛高,集中度低,外资企业挤占市场空间成了我国所有医疗器械行业入局者面临的共同挑战. ...

  5. 关于全栈项目【臻美Chat】https访问 遇到的问题【技术栈：Nodejs】

    首先我上线时可以http访问也可以https访问,那么配置如下:nginx.conf user root;worker_processes auto;error_log /var/log/nginx/ ...

  6. 深入理解springboot的自动注入

    一.开篇   在平时的开发过程中用的最多的莫属springboot了,都知道springboot中有自动注入的功能,在面试过程中也会问到自动注入,你知道自动注入是怎么回事吗,springboot是如何 ...

  7. Linux YUM 配置源

    Linux Yum 简介 YUM是交互式的以rpm为基础的软件包管理工具.YUM可以根据仓库的元数据信息,去自动的实现系统更新,包括依赖性分析,过期软件包处理.我们也可以利用yum来进行软件安装,删除 ...

  8. centos7解决无法上网的问题

    问题:centos7出现无法进行联网,如下图所示,执行该命令: ping qq.com 出现如下情况: 解决方法: 首先cd到需要修改文件的所在目录下: [root@localhost ~]# cd ...

  9. 强化学习-学习笔记9 | Multi-Step-TD-Target

    这篇笔记依然属于TD算法的范畴.Multi-Step-TD-Target 是对 TD算法的改进. 9. Multi-Step-TD-Target 9.1 Review Sarsa & Q-Le ...

  10. MC34063降压电路

    MC34063芯片由温度自动补偿功能的基准电压发生器.比较器.占空比可控振荡器. 触发器和大电流输出开关电路等组成,具有功能齐全.价格低廉.体积小.效率高.仅需少量外部元器件等优点,其主要特性如表所示 ...