层叠样式表 (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. WPF开发随笔收录-报警闪烁效果实现

    一.前言 工作中目前经手的项目是医疗相关的监护软件,所以会涉及到一些报警效果的实现,今天在这里就简单分享一下实现方式 二.正文 1.实现的方式比较的简单,就是通过一个Border控件,然后搭配Data ...

  2. Multiparty Cardinality Testing for Threshold Private Set-2021：解读

    本文记录阅读该论文的笔记. 本文基于阈值加法同态加密方案提出了一个新的允许\(N\)方检查其输入集的交集是否大于\(n-t\)的IPSI方案,该协议的通信复杂度为\(O(Nt^2)\). 注意:\(N ...

  3. CF1656E Equal Tree Sums 题解

    题目链接 思路分析 自认为是一道很好的构造题,但是我并不会做. 看了题解后有一些理解,在这里再梳理一遍巧妙的思路. 我们先来看这样的一张图: 我们发现当去掉叶子节点的父亲时,剩下树的价值和等于叶子节点 ...

  4. Linux操作系统（3）：crond 任务调度

    crontab 进行 定时任务的设置.概述: 任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类: 1.系统工作:有些重要的工作必须周而复始地执行.如病毒扫描等 2.个别用户工作:个别 ...

  5. 使用Docker搭建自己的Bitwarden密码管理服务

    相信身为开发者,总会在各种网站中注册账号,为了方面记忆可以使用同一套账号密码进行注册,自从前段时间学习通时间撞库后有些人已经开始疯狂改密码了,可是密码一多就很难记忆,最好找个地方存储账户信息 我曾经使 ...

  6. 从Python到水一篇AI论文（核心 or Sci三区+）

    博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https:// ...

  7. docker安装dvwa

    docker run -d --name dvwa -p 8011:80 -p 33066:3306 -e MYSQL_PASS="password" citizenstig/dv ...

  8. 研发效能生态完整图谱&DevOps工具选型必看

    本文主要梳理了研发效能领域完整的方向图谱以及主流工具,其中对少部分工具也做了一些点评.看了之后,大家可以对研发效能这个领域有个整体认识,同时研发效能落地的时候也有对应的工具(黑话叫抓手)可以选择. 我 ...

  9. Redis配置与优化

    一.缓存概念 缓存是为了调节速度不一致的两个或多个不同的物质的速度,在中间对速度较慢的一方起到加速作用,比如CPU的一级.二级缓存是保存了CPU最近经常访问的数据,内存是保存CPU经常访问硬盘的数据, ...

  10. AtCoder Beginner Contest 261E // 按位思考 + dp

    题目链接:E - Many Operations (atcoder.jp) 题意: 给定一个数x,以及n个操作(ti,ai): 当 t = 1 时,将 x & a 当 t = 2 时,将 x ...