HTML 样式

1. font字体

font-family 字体样式比如:微软雅黑、Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体

color 字体颜色

font-size:50px 字体大小 注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

text-align:center 对齐方式

font-style 字体风格斜体 normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示

font-variant 小型大写字母

font-weight 字体粗细normal:400 bold:700 最粗:900

总结

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

2. background背景

background-color 背景颜色

background-image: url(/i/eg_bg_04.gif) 背景图片

background-position:center 背景定位居中 (属性:top、bottom、left、right 和 center)

background-repeat 属性设置是否及如何重复背景图像

总结

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

3.text文本

text-indent: 5em; 缩进

text-indent: -5em; 缩进悬挂

text-align:center 对齐方式 (属性:left、right 和 center)

word-spacing: 字间隔 30px或者-0.5em

letter-spacing 字母间隔区别:字母间隔修改的是字符或字母之间的间隔

text-decoration 划线属性 none / underline / overline / line-through / blink

white-space 处理空白符它会把所有空白符合并为一个空格属性:normal丢掉多余的空白符

属性

pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

总结

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

4.a链接

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

text-decoration 属性大多用于去掉链接中的下划线: none

background-color属性大多用于设置链接中的背景色

5. list-style列表

list-style-type 设置显示方式比如说是实心圆点黑色方块

总结

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。
marker-offset

6.表格

border 边框属性

width

height

text-align:right; 表格中的文本对齐方式

vertical-align: bottom; 垂直对齐方式

padding 表格内边距

总结

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

7.outline轮廓

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 <style type="text/css">
 p 
 {
 border:red solid thin;
 outline:#00ff00 dotted thick;
 }
 </style>
 </head>
 
 <body>
 <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
 </body>
 </html>

 <input type="checkbox">抽烟 // 方块点选,点选之后可以取消
 <input type="radio">喝酒  // 圆形点选,点选之后不可以取消

14.选择点选

float: right;

float: left;

13.float浮动

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

position 属性值的含义：

position

12. Positioning定位

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

总结

11.margin外边距和外边距合并

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

总结

border-color: transparent; 透明边框

border-top-color border-right-color border-bottom-color border-left-color

边框的颜色

border-top-width border-right-width border-bottom-width border-left-width

边框的宽度

边框与背景

border-top-style border-right-style border-bottom-style border-left-style

定义边框样式:

border-style: none 没有边框

边框的样式

10.border边框

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

总结

h1 {padding: 10px;}

例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：

padding 属性接受长度值或百分比值，但不允许使用负值。

9.padding内边距

element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距，也有资料将其翻译为空白或空白边。

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

8.盒子模型

html之样式的更多相关文章

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
BootStrap_02之全局样式及组件
1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
CSS 选择器及各样式引用方式
Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...
x:bind不支持样式文件或此Xaml文件必须又代码隐藏类才能使用{x:Bind} 解决办法
这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题如果是写在Style里,则提示 “x: ...
input[tyle="file"]样式修改及上传文件名显示
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...
WPF样式之画刷结合样式
第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷Radia ...
JavaScript特性（attribute）、属性（property）和样式（style）
最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相 ...
邮件中嵌入html中要注意的样式
工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在 ...
拼图小游戏之计算后样式与CSS动画的冲突
先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲 ...
input type='file'上传控件假样式
采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

随机推荐

6487. 【GDOI2020模拟02.29】列强争霸war
题目描述区间绝对众数即出现次数>len/2下取整的数对于区间[L,R]扫一遍,维护一个数x和出现次数s 当前数=x则s+1,否则s-1,若s已为0则把x设为当前数若区间内存在绝对众数,那 ...
达拉草201771010105《面向对象程序设计（java）》第十二周学习总结
达拉草201771010105<面向对象程序设计(java)>第十二周学习总结第一部分:理论知识 Java的抽象窗口工具箱(AbstractWindow Toolkit,AWT)包含在j ...
前端笔记--css样式笔记
一.浮动定位布局 1.浮动布局 left 元素向左浮动 right 元素向右浮动例如:设置2个按钮,要使得按钮在同一行位置摆放,可以使用浮动,令按钮浮动到右边.注意,先设置float的按钮,例如: ...
面试题57-II.和为s的连续正数序列
面试题57-II.和为s的连续正数序列 1.题目 LeetCode-面试题57-II.和为s的连续正数序列输入一个正整数 target ,输出所有和为 target 的连续正整数序列(至少含有两个数 ...
php+mysql开发一个最简单的在线题库，在线做题系统！
题库,对于教育机构,学校,在线教育,是很有必要的,网上也有不少的第三方在线题库系统,但是本次案例,会让有需要的人了解题库的开发思路,其实很简单,无非就是一个表单验证,数据库验证. 1.先构建表单数据2 ...
Python3关于current_app传递给子线程
在学习Flask的时候,<Flask Web开发>这本书中有一个异步发送email的例子,其中用到了线程 from . import mail,create_app def send_as ...
[2020.03]Unity ML-Agents v0.15.0 环境部署与试运行
一.ML-Agents简介近期在学习Unity中的机器学习插件ML-Agents,做一些记录,用以简单记录或交流学习. 先简单说一下机器学习使用的环境场景:高视觉复杂度(Visual Complex ...
《Javascript中 == 和 === 的区别》
在js中 ==(相等运算符) 和 === (严格运算符)是两种判断两个变量是否相等的运算符. == :判断是否相等,忽略类型进行值的比较.(存在隐式类型转换的比较) ===:判断是否相等,先判断值是否 ...
前端---css3优化
一.视差滚动(经过优化后的代码) .front::before { content: ''; position: fixed; // 代替background-attachment width: 10 ...

html之样式