常见的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 ...
随机推荐
- dart里面的时间处理:
原文地址:https://www.cnblogs.com/wyhlightstar/p/11059942.html 1.获取当前时间 var now = new DateTime.now(); pri ...
- ES6深入浅出-10 ES6新增的数据类型-3.其他类型
Map类型 Map 类型 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map Ma ...
- 算法习题---5.1大理石在哪(UVa10474)
一:题目 现有N个大理石,每个大理石上写了一个非负整数.首先把各数从小到大排序,然后回答Q个问题.每个问题问是否有一个大理石写着某个整数x,如果是,还要回答哪个大理石上写着x.排序后的大理石从左到右编 ...
- [译]使用Pandas读取大型Excel文件
上周我参加了dataisbeautiful subreddit上的Dataviz Battle,我们不得不从TSA声明数据集创建可视化.我喜欢这种比赛,因为大多数时候你最终都会学习很多有用的东西. 这 ...
- 123457123456#1#----com.MC.CarWashKidsGames234----前拼后广--洗车游戏mc-mc1111
com.MC.CarWashKidsGames234----前拼后广--洗车游戏mc-mc1111
- 【esp8266】技术汇总帖
https://blog.csdn.net/xh870189248/article/details/80027961 这哥们 牛
- SignalR 传Model类型的参数
目录 集线器方法 js调用 集线器方法 集线器写了一个方法是这样的 public void test(string name, Customer customer) 第一个参数是string类型的,第 ...
- Form表单的传递与接收
目录 表单的构建 后端接收 创建model 用Model接收表单的后端 表单的构建 我才知道这个东西,在开发中经常遇到表单的情况.一下子提交一串内容.表单元素 form,里面的内容必须有name字段. ...
- CSS float属性
表示向左浮动,比如多个div在一个页面上,默认情况是:一行一个div,但是只要在div的css中使用float:left,可以使一行有多个div,这样可以把网页划分成很多块,但是使用该属性会影响后面的 ...
- Vmware player--打开vmdk; 导出系统;
https://www.cnblogs.com/wxdblog/p/7091496.html 用vmware player打开已经存在的VMDK的方法: https://jingyan.baidu.c ...