常见的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 ...
随机推荐
- PPT插件(islide)
https://www.islide.cc/features iSlide 主要功能模块 一键优化 将PPT中不规则的字体,段落,色彩,参考线布局,风格样式等一键化全局统一设置,构建专业和规范. ...
- SeetaFace2 cmake VS2015编译编译
cmake Selecting Windows SDK version 10.0.17134.0 to target Windows 10.0.18362. == BUILD_VERSION: v2. ...
- log4j 异常时在日志文件里面显示空的。
如下图所示,输入的时候不要写 e.getStackTrace() 一般情况下不会出问题,但有时候就会出问题 解决方案
- 【FreeMarker】Spring MVC与FreeMarker整合(二)
前一篇介绍了FreeMarker的基本使用,本例介绍Spring MVC与FreeMarker整合 不熟悉项目搭建,可参考 [FreeMarker]FreeMarker快速入门(一) 整合 1.新建S ...
- k8s记录-kubeadm安装(一)(转载)
配置 kubeadm 概述 安装 kubernetes 主要是安装它的各个镜像,而 kubeadm 已经为我们集成好了运行 kubernetes 所需的基本镜像.但由于国内的网络原因,在搭建环境时,无 ...
- Python 初级 5 判断再判断(四)
一 .复习 分支:完成测试并根据结果做出判断称为分支. 代码块:一行或放在一起的多行代码 缩进:一个代码行稍稍靠右一点 关系操作符(比较操作符):==, >, >=, <, < ...
- 一行命令学会全基因组关联分析(GWAS)的meta分析
为什么需要做meta分析 群体分层是GWAS研究中一个比较常见的假阳性来源. 也就是说,如果数据存在群体分层,却不加以控制,那么很容易得到一堆假阳性位点. 当群体出现分层时,常规手段就是将分层的群体独 ...
- LwIP应用开发笔记之一:LwIP无操作系统基本移植
现在,TCP/IP协议的应用无处不在.随着物联网的火爆,嵌入式领域使用TCP/IP协议进行通讯也越来越广泛.在我们的相关产品中,也都有应用,所以我们结合应用实际对相关应用作相应的总结. 1.技术准备 ...
- ng2中 如何使用自定义属性data-id 以及赋值和取值操作
项目环境:ng4.x 写法说明: [attr.data-nurseKey] <div [attr.data-nurseKey]="k.nurseKey"></di ...
- C++STL位标志、智能指针与异常处理
参考<21天学通C++>第25章节,对STL位标志进行介绍.就是当需要不是像char int long 等整个字节数的数据表示形式,而是使用二进制位表示的时候,通常使用这里讲到的位标志.从 ...