css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称
可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体
p { font-family:'宋体','黑体','Arial'; }
font-size 设置字体大小
length 用长度值指定文字大小,不允许负值
percentage 用百分比指定文字大小,其百分比取值是基于父对象中字体的尺寸,不允许负值
font-weight 控制字体粗细
normal正常的字体,相当于数字值400
bold 粗体,相当于数字值700
100~900 定义由细到粗的字符
p { font-weight:bold;}
font-style 控制字体是否倾斜
normal 指定文本字体样式为正常的字体
italic 指定文本字体样式为斜体,对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique
oblique 指定文本字体样式为倾斜的字体,人为的使文字倾斜,而不是去选取字体中的斜体字
p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }
font(字体样式缩写)
例:
p{
font-style: italic;
font-weight: bold;
font-size: 14px;
line-height: 22px;
font-family:'宋体';
}
缩写后:
p { font: italic bold 14px/22px '宋体'; }
color 文本颜色
•英文单词,比如:red,yellow,green …
•十六进制表示方式,#开头,6个十六进制的字符或数字组合,比如:#FFFFFF,#000000 …
•RGB模式,红 0-255,绿 0-255,蓝 0-255,比如:RGB(120,33,234)
•RGBA模式,比如:RGBA(255,0,0,0.5),最后的A表示透明度50%
text-decoration 文本装饰线条
none 默认。定义标准的文本
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 定义穿过文本的一条线
blink 定义闪烁的文本
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
text-shadow 文本阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色
CSS Code复制内容到剪贴板
h1{ text-shadow: 2px 2px 2px #ff0000;}
宽度 width : auto | length
高度 height : auto | length
p { width:300px;}
div { width:50%;}
img { height:200px;}
div { height:100px;}
外边距 margin : auto | length
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left 设置左边的外边距
margin-right 设置右边的外边距
缩写型式:
margin: 上边距 右边距 下边距 左边距
margin: 上下边距 左右边距
margin: 上边距 左右边距 下边距
CSS Code复制内容到剪贴板
div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
内边距 padding : length
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left 设置左边的内边距
padding-right 设置右边的内边距
div { width:300px; height:100px; padding:10px;}
透明度 opacity :
number值为 0.0-1.0 之间的小数
兼容全浏览器的写法:
div{ filter:alpha(opacity=50); } /* IE6-IE8 */
div{ opacity:0.5; } /* 现代浏览器 */
以上这篇css 常用样式(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微学网。
这就是微学网-程序员之家为你提供的"css 常用样式(分享)"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/3764.html
css图片菜鸟教程,css 常用样式(分享)相关推荐
- 三小时学会css(菜鸟教程精华版)【中】
三小时学会css 上期传送门 CSS 盒子模型(Box Model) CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容. 盒模型允许我们在其它元素和周围元素边 ...
- 三小时学会css(菜鸟教程精华版)【上】
三小时学会css 三小时学会HTML传送门 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 三小时学会css(菜鸟教程精华版)【下】
三小时学会css 上期传送门 CSS组合选择符 组合选择符说明了两个选择器直接的关系: 后代选择器(以空格 分隔) 子元素选择器(以大于 > 号分隔) 相邻兄弟选择器(以加号 + 分隔) 普通兄 ...
- 菜鸟教程css事件,【推荐】DIV+CSS入门菜鸟教程
这篇文章主要为大家详细介绍了[推荐]DIV+CSS入门菜鸟教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. CSS功能复杂多变,大多数新手莫不着 ...
- css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...
- 菜鸟教程-css学习笔记
CSS实例中有很多CSS的例子,可以学习. <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- css图片横向压缩,【css样式生成 图片合并压缩工具】Sprite,你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
- html图片浮动教程,CSS Float(浮动)
CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一 ...
- CSS格式化、兼容及常用样式(switch开关记得收藏)
目录 内容介绍 一.格式化 1.select格式化样式 2.button格式化样式 3.input去除边框 4.selection去除下拉三角按钮 5.textarea隐藏右下角拖动及滚动条 二.兼容 ...
最新文章
- Tomcat安全加固
- Codeforces 题解 CF863A 【Quasi-palindrome】
- iview标签页的点击方法_18页PPT:6个高手常用的自我介绍套路,很是得人心,学习...
- 2月末周全球域名解析商Top15:万网DNSPod份额均上涨
- 5分钟看懂微服务架构下的Consul 特性及搭建
- 如何快速搭建云原生企业级数据湖架构及实践分享
- gradle5.6.3软件安装
- AAuto如何设置定时器
- StringBoot接收XML参数,Java解析XML参数并封装
- SQL查询优化工具--EverSQL
- LOJ6437 PKUSC2018 PKUSC
- Sourcemap是什么?Sourcemap的作用及用法概括
- 如何把word里的分页符、换行符替换成回车符?
- 一路生花 - 温奕心
- 计算机打字怎么分行,微信打字怎么换行
- 群晖开启root账户登陆
- 发现一个可以免费看电影听音乐的网站
- 考研复试--数据链路层--计算机网络面试题
- 二维计算机动画基础,第八章计算机动画基础.ppt
- 对接快递100快递管家API之授权接口
热门文章
- 企业微信中授权小程序
- C++stl翁恺老师笔记
- 关于core_cm3.c和core_cm3.h,Core_cmFunc.h 和 Core_cmInstr.h的理解
- iOS 屏幕旋转监听
- 对标阿里P6-P7高级Java程序员的进阶技术路线
- 浅谈工业网络架构及安全
- Java调用 新浪微博API 接口发微博(包含js微博组件、springMVC新浪登录)详解
- 【JAVA】 new ArrayList<> () {{}} 双花括号 是什么写法?
- 小冈香,何以给生活高级感
- 软件工程之高质量代码(编码规范)