常见的CSS样式
常见的css样式
color 文字颜色
background-color 背景颜色
opacity 设置透明度
颜色: 光的三原色: 红 绿 蓝
三种颜色表示法:
名词表示法: red green blue
16进制颜色表示法: #000000 十六进制 0 --- f
# ff(红色) 00(绿色) 00(蓝色)
十进制颜色表示法:
rgb(255红,255绿,255蓝) 取值范围 0 --- 255
rgba(255红,255绿,255蓝,0.5透明度) 取值范围 0 --- 255
a 表示透明度 取值范围 0-1之间 0代表完全透明 1代表不透明
opacity 与 rgba() 设置透明度的区别:
opacity:表示所有内容都更改透明度
rgba():表示只有背景颜色透明
尺寸:
width:宽 常见的计量单位: px(像素) %(百分比) em(字体单位)
height:高
min-width 最小宽度
max-width 最大宽度
字体:
font-size: 设置字体大小 浏览器默认的普通文字大小为16px 最低设置文字大小为8px 一般默认最低为12px 最大不限
font-style: 设置字体样式 normal表示普通体文字 italic表示斜体文字
font-weight: 设置字体粗细 normal表示普通体文字 bold表示粗体
font-family: "楷体"; 设置字体名称 设置的字体必须是电脑上已经安装过的字体
文本、段落
text-align: 设置文本的水平对齐方式 默认 left 左对齐 可以设置成 center 居中对齐 right 右对齐
text-indent:设置文本的首行缩进 一般中文段落都会设置成2em 代表首行缩进两个字符
line-height:设置行高,如果行高比文字的高度要多,那么剩余空间会在文字上下两端平均分配
如果设置单行文本在该标签内垂直居中,则直接可以设置行高等于标签的高度
text-decoration 设置文本修饰
none 表示没有任何修饰 通常用于去掉超链接的下划线
underline 设置文本下划线
line-through 设置贯穿线 也叫删除线
overline 设置文本上划线
vertical-align 设置元素的垂直对齐方式
top 表示设置顶线对齐
baseline 表示设置基线对齐
middle 表示设置中线对齐
bottom 表示设置底线对齐
背景:
background-color 背景颜色
background-image 背景图片
url("") 来引入一张背景图 默认背景图是以平铺的方式显示
background-repeat 设置背景图片的平铺方式
repeat 平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
round 环绕
background-size 设置背景图片的尺寸
background-position 设置背景定位
left top right bottom center
设置以下两个样式 可以将一张背景图完全覆盖整个标签
background-repeat: round;环绕
background-size: cover;覆盖
常见的CSS样式的更多相关文章
- 常见网站CSS样式重置
腾讯 1 2 3 4 5 6 7 8 9 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea, ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
- JS设置CSS样式的几种方式
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- CSS样式----图文详解(二):css属性
主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- JS设置CSS样式的几种方式【转】
用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
- [css]样式合并与模块化
原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E7%9A%84%E6%A0%B7%E5%BC%8F%E5%90%88%E5%B9%B6%E4 ...
随机推荐
- Jmeter之__CSVRead随机读取变量
背景:当你需要从一些数据中随机的取值用的话可以用这个函数来实现__CSVRead __CSVRead函数用于对脚本进行参数化,当脚本中不同变量需要不同参数值时,可以考虑__CSVRead函数. _CS ...
- 0.9.0.RELEASE版本的spring cloud alibaba sentinel实例
sentinel即哨兵,相比hystrix断路器而言,它的功能更丰富.hystrix仅支持熔断,当服务消费方调用提供方发现异常后,进入熔断:sentinel不仅支持异常熔断,也支持响应超时熔断,另外还 ...
- Spring cloud微服务安全实战-4-9Zuul网关安全开发(二)
把在微服务里面写的安全的相关逻辑挪到网关里面来.这样把安全逻辑和业务逻辑解耦开.那么这些问题就都解决了. 先来看下之前的安全的代码,首先在之类做了认证,认证服务器去认证,拿这个token去换用户信息. ...
- windows10 环境下的amqp安装步骤(图文)
安装PHP扩展ampq 查看phpinfo()信息 下载ampq扩展 下载地址:http://pecl.php.net/package/amqp 选择一个dll版本下载,本文选择的是1.9.3 自己根 ...
- AnyCAD三维控件(转)
在WinForm中可以方便的集成AnyCAD.Net三维控件,只需要以下几部即可完成. 一.添加DLL程序集 AnyCAD.Foundation.Net.dll AnyCAD.Presentation ...
- [导航教程] [C#基类库大全]官方产品发布与源码下载---苏飞版
http://www.sufeinet.com/thread-655-1-1.html
- [ kvm ] 学习笔记 7:KVM 虚拟机创建的几种方式
通过对 qemu-kvm.libvirt 的学习,总结三种创建虚拟机的方式: (1)通过 qemu-kvm 创建 (2)通过 virt-install 创建 (3)通过 virt-manager 创建 ...
- 【JQuery】性能优化方法
尽管JavaScript比JAVA C++慢很多,JQuery比原生Js还慢很多,但是我们通过良好的编程习惯还是能提高代码执行的效率. 一.选择器的使用 选择同一个元素,各种方法之间的性能是不一样的, ...
- maven 中配置多个mirror的问题
公司搭建的maven私服做镜像,有使用aliyun的镜像,还有其他地方的, 默认情况下配置多个mirror的情况下,只有第一个生效.那么我们可以将最后一个作为默认值,前面配置的使用环境变量动态切换. ...
- 为做个程序员英语字典,我处理了StackOverflow和HackerNews10年5千万条数据
有点标题党,不过都说都真实的.英语技能对开发员人员至关重要.所有人都不喜欢背单词,但更惨的是背住的单词发现没怎么用,又慢慢地忘记了.本来计划给自己做个开发人员常用单词表,感觉可能对其它人也有用,所以就 ...