HTML（七）CSS
一个实例
<!DOCTYPE html>
菜鸟教程(runoob.com)
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
CSS 实例!
这是一个段落。
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
h1 { color : blue ; font-size : 12px ;}选择器 { 声 明 ; 声 明 ;}
选择器 { 属性 : 值 ; 属性 : 值 ;}
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
CSS注释以 "/" 开始, 以 "/" 结束
style放在html的任何地方都会生效,一般都放到里
CSS Id 和 Class
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
id属性不要以数字开头
实例:
para1
{
text-align:center;
color:red;
}
Hello World!
这个段落不受该样式的影响。
//class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，
class可以在多个元素中使用
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示
类名的第一个字符不能使用数字
实例1:
.center
{
text-align:center;
}
标题居中
段落居中。
也可以指定特定的HTML元素使用class
实例2:
p.center
{
text-align:center;
}
这个标题不受影响
这个段落居中对齐。
四种 css 选择器有修饰上的优先级
直接在标签内部写css代码>id>class>style,就近原则
CSS 创建
插入样式表
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
优先级
内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
CSS 背景
CSS 属性定义背景效果
background-color
background-image
background-repeat
background-attachment
background-position
背景颜色
CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
body
{
background-image:url('sources/img1.JPG');
}
背景图像 - 水平或垂直平铺
水平平铺:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
垂直平铺:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}
不平埔:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
背景图像- 设置定位
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
position属性值中后面的top是图片与文字的对齐方式
背景- 简写属性
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
实例:
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position
background-attachment属性值
值说明
scroll 背景图片随页面的其余部分滚动,这是默认
fixed 背景图像是固定的,即无论网页怎么滚动,图片在浏览器中位置不变
inherit 指定background-attachment的设置应该从父元素继承
CSS 文本格式
文本颜色
RGB红绿蓝
对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性
文本的对齐方式
默认左对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
当text-align设置为"justify"，每一行被展开为宽度相等，
左，右外边距是对齐（如杂志和报纸）
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线
也可以这样装饰文字:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
我们不建议强调指出不是链接的文本，因为这常常混淆用户
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母
可用于所有字句变成大写或小写字母，或每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进
p {text-indent:50px;}
字符之间的空间
letter-spacing:2px;
行间距
line-height:150%;
单词之间的空白空间
word-spacing:30px;
在元素内禁用文字环绕
white-space:nowrap;
垂直对齐图像
默认是bottom,图片的底部与文本对应
vertical-align:text-top;
vertical-align:text-bottom;
添加文本阴影
h1 {text-shadow:2px 2px #FF0000;}
CSS 字体
字体系列
font-family 属性应该设置几个字体名称作为一种"后备"机制，
如果浏览器不支持第一种字体，他将尝试下一种字体
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
CSS font-family
这一段的字体是 Times New Roman
这一段的字体是 Arial.
字体样式
这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
实例:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，
是16像素（16px=1em）
设置字体大小像素
h1 {font-size:40px;}
用em来设置字体大小
h1 {font-size:2.5em;} /* 40px/16=2.5em */
使用百分比和EM组合
在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比：
实例:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
设置字体加粗
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
CSS 链接
链接样式
a:link {color:#000000;} /* 未访问链接/
a:visited {color:#00FF00;} / 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上,聚焦 /
a:active {color:#0000FF;} / 鼠标点击时 */
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
注意:hover必须在:link和 a:visited之后定义才有效
注意:active必须在hover之后定义是有效的
背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
- 除了改变以上的属性,还可以添加更多属性,自由添加
创建链接框的实例
<!DOCTYPE html>
菜鸟教程(runoob.com)
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
CSS 列表
列表
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
不同的列表项标记
list-style-type属性指定列表项标记的类型是：
无序列表实例:
ul.a {list-style-type: circle;} //空心圆圈
ul.b {list-style-type: square;} //实心方块
有序列表实例:
ol.c {list-style-type: upper-roman;} //大写罗马数字
ol.d {list-style-type: lower-alpha;} //小写字母
作为列表项标记的图像
要指定列表项标记的图像，使用列表样式图像属性：
ul
{
list-style-image: url('sqpurple.gif');
}
列表 -简写属性
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
CSS 表格
表格边框
指定CSS表格边框，使用border属性
table,th,td
{
border:1px solid black;
}
折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开：
实例
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度
table {width:100%;}
th{height:100px;}
td{height:50px}
表格文字对齐
表格中的文本对齐和垂直对齐属性
text-align属性设置水平对齐方式,向左,右,或中心
td{text-align:right;}
垂直对齐属性设置垂直对齐,比如顶部,底部或中间：
td{height:50px;vertical-align:bottom;}
表格填充
如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:
td{padding:15px;}
表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色：
table, td, th{border:1px solid green;}
th{background-color:green;color:white;}
HTML（七）CSS的更多相关文章
- 七. CSS字体
概述 所谓字体:即文字的形体结构,根据外观字体分不同的类别:衬线字体Serif.无衬线字体sans-serif和等宽字体monospace.每一个类别的字体又可以分成不同的字体族font family ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
- WEB入门.七 CSS布局模型
学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- CSS的基本概念
<!--CSS 一.概念:CSS的全称是Cascading Style Sheets,层叠样式表,用来控制HTML标签样式,在美化网页中起到非常重要的作用 CSS的编写格式是键值对形式的,比如 ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- css基础重点内容总结
一.目录引入 ./同级(当前) ../上级目录 ../../上上级目录 二.标签种类: 1.块级标签(block):独占一行,宽高可设: 2.行内块标签(inline-block):不独占一行,宽高 ...
- python之路-----前端之css
本篇内容 CSS 语法 css的四种引入方式 css选择器 css属性操作 Caution! 后台管理布局 css响应式布局 一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声 ...
- CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
- 前端之html的常用标签2和css基本使用
一 列表标签 ul标签:无序列表 ol标签:有序列表 li标签:写在ul和ol标签里面的 dl标签:定义列表 dt标签和dd标签:都写在dl里面的 <!DOCTYPE html> < ...
随机推荐
- Samba：打造企业级授权文件共享服务器
写在前面的话 先来说说故事背景:公司内部文件服务器的解决方案其实很多,对于中小型互联网公司,大多的在这一块的选型还是 FTP,或者 VSFTP,但是个人实在是对那个东西喜欢不起来,于是就选择了配置相对 ...
- 腾讯企业邮箱 POP3/SMTP 设置
下午魅族MX2刷完机,原先配置的公司邮箱还要重新配置.有些地方需要改,找到了篇文章,如下: 腾讯企业邮箱支持通过客户端进行邮件管理.POP3/SMTP协议收发邮件服务器地址分别如下.接收邮件服务器:p ...
- setInterval循环设置并传入不同的参数
var taskId; var __sto = setInterval; window.setInterval = function(callback,timeout,param){ var args ...
- 干货来了！python学习之重难点整理合辑1
关于装饰器.lambda.鸭子类型.魔法函数的理解仍存有困惑之处,趁周末有时间温故,赶紧去自学了解下相关知识. 1.装饰器是什么: 很多初学者在接触装饰器的时候只做到了肤浅的了解它的概念.组成形态.实 ...
- 记一次paramiko远程连接遇到的坑
背景:工作中遇到了一个问题,需要用到windows向windows连接(文件传发)以及,linux向windows连接(文件传发)的需求. 自然而然会考虑到用paramiko,然而paramiko我用 ...
- maysql的自增字段
因为mysql中的自增字段与oracle数据库是不一样的,所以在这里唠嗑一下mysql的自增字段 1.添加自增字段 1.1 在创建表时添加 create table emp( empno ) auto ...
- caddy & grpc（3） 为 caddy 添加一个 反向代理插件
caddy-grpc 为 caddy 添加一个 反向代理插件 项目地址:https://github.com/yhyddr/caddy-grpc 前言 上一次我们学习了如何在 Caddy 中扩展自己想 ...
- 9.源码分析---SOFARPC是如何实现故障剔除的？
SOFARPC源码解析系列: 1. 源码分析---SOFARPC可扩展的机制SPI 2. 源码分析---SOFARPC客户端服务引用 3. 源码分析---SOFARPC客户端服务调用 4. 源码分析- ...
- 使用sublime调试node.js
安装node相关 从node官网下载node的安装文件,我下的版本是node-v0.10.22-x64.exe,安装完node,node相关工具应该都加都环境变量path中了. 命令行下安装node- ...
- AVL树（查找、插入、删除）——C语言
AVL树 平衡二叉查找树(Self-balancing binary search tree)又被称为AVL树(AVL树是根据它的发明者G. M. Adelson-Velskii和E. M. Land ...