CSS基础(二):基础和语法
CSS语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素。
selector {declaration1; declaration2; ... declarationN }
每条声明由一个属性和一个值组成。
属性(property)是样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
引入CSS样式
如何插入样式表,当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:外部样式表、内部样式表和内联样式。
1.外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="site.css" />
</head>
2.内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head>
<style type="text/css">
p {margin-left: 20px;}
body {background-image: url("images/test.gif");}
</style>
</head>
3.内联样式
由于要将表现和内容混杂在一起,即HTML代码和CSS代码混编,这样会不利于文档结构,并且不容易维护,所以一般不要使用这种方式引入样式。例如改变段落的颜色和左外边距:
<p style="color: red; margin-left: 20px;">
This is a paragraph
</p>
CSS基础(二):基础和语法的更多相关文章
- shell编程基础(二): shell脚本语法之分支语句和循环语句
一.分支语句 1.条件测试:test [ 命令test或[可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假,则命令的Exit Status为1(注意与 ...
- JavaScript学习 - 基础(二) - 基础类型/类型转换
基础类型 - 数字类型(Number) 1.最基本的数据类型 2.不区分整型数值和浮点型数值 3.所有数字采用64位浮点格式存储,相当于Java和C语言中double格式 4.能表示的最大值 +- 1 ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- Ruby语法基础(二)
Ruby语法基础(二) 继续ruby的学习,这次主要把目光放到运算符,条件判断,循环,方法,以及其他ruby特有的基本概念上 运算符 算术运算符:+,-,/,%,**,值的注意的是,ruby中一切皆为 ...
- R语言语法基础二
R语言语法基础二 重塑数据 增加行和列 # 创建向量 city = c("Tampa","Seattle","Hartford"," ...
- Golang 基础之基础语法梳理 (二)
大家好,今天将梳理出的 Go语言基础语法内容,分享给大家. 请多多指教,谢谢. 本次<Go语言基础语法内容>共分为三个章节,本文为第二章节 Golang 基础之基础语法梳理 (一) Gol ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象(Media Object)
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
随机推荐
- 从源代码分析Android-Universal-Image-Loader图片下载技巧
在手机上尤其需要考虑网络对图片下载的影响,常见的情况是在2G网络.在3G网络需要不同的下载策略,也就是说在慢速网络与快速网络中下载需要考虑不同的策略.一种常见的策略就是Android客户端和服务端相配 ...
- [ACM_模拟] ZJUT OJ 1139 七龙珠 (追及类问题,s-t图像,模拟)
Description 话说孙悟饭与小林正在与刚造访地球的赛亚人贝吉塔交战,因为连贝吉塔的手下纳巴的实力也远在他俩之上,由于差距悬殊,小林不得不设脱离战场,去寻找正在修炼中的悟空求救,而赛亚人一伙 ...
- [游戏模版19] Win32 物理引擎 匀速运动
>_<:Learning the physical engine >_<:resource >_<:code #include <windows.h> ...
- 使用SharePoint CSOM 编写高效的程序
上一篇文章中简单的介绍了使用CSOM进行编程.今天主要讲一下CSOM使用中一些小技巧,可以让你的程序运行的更快. 单独加载某些属性 在上文中的例子,需要返回Web对象信息的时候,我们使用了如下的代码: ...
- Nodejs学习笔记(十)--- 与MongoDB的交互(mongodb/node-mongodb-native)、MongoDB入门
目录 简介 MongoDB安装(windows) MongoDB基本语法和操作入门(mongo.exe客户端操作) 库操作 插入 查询 修改 删除 存储过程 nodejs操作MongoDB 插入 查询 ...
- atitit.web的动态include 跟变量传递 java .net php
atitit.web的动态include 跟变量传递 java .net php 1. 动态include <jsp:include 1 2. 使用QueryString 1 3. 使用Ses ...
- hdu 1087 动态规划之最长上升子序列
http://acm.hdu.edu.cn/showproblem.php?pid=1087 Online Judge Online Exercise Online Teaching Online C ...
- 通过ReadWriteReentrantLock源代码分析AbstractQueuedSynchronizer共享模式
1.特点 ReentrantLock能够实现共享资源的互斥访问,但是它在某些条件下效率比较低下.比如,多个线程要查询(或者说读取)某列车的余票数,如果使用ReentrantLock,那么多个线程的查询 ...
- 关于EditText的OnClickListener失效的解决办法
最近开发,遇到一个问题,就是如果EditText只作为显示,不需要编辑文本,但需要点击该布局可以执行其他事件,就会冲突,EditText依然处于文本编辑状态: 如: 如:有5个EditText,最后一 ...
- android retrofit @Query用法
http://www.b3a4a.com/?id=71 //https://login.xx.cn/mobile/login?access_token=A7E3D8CC98776F7C16F328B6 ...