CSS3美化网页元素
<span>标签 </span>
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书"
font-size 设置字体大小 font-size:12px;
font-style 设置字体的风格 font-style:italic;
font-weight 设置字体粗细 font-weight:bold;
font 在一个声明设置所有字体属性 font:italicbold36px"宋体 "
font-style属性
normal 正常
italic 倾斜(用的多)
oblique 斜体
font-weight属性
值 说明
normal 默认值定义标准字体
bold 粗体字体
bolder 更粗字体
lighter 更细字体
100....900 定义由粗到细的字体400等同于normal,700等同于bold
font属性
字体属性的顺序:字体风格---字体粗细--字体大小---字体类型
p span{
font:obiqer bold 12px"楷体"
}
文本属性
属性 含义 举例
color 设置文本颜色 color#ooc;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本缩进 text-indent:20px;
line-height 设置文本行高 line-height:25px;
text-ddecoration 蛇者文本装饰 text-decoration:underline;
值 说明
left 把文本排列到左边。默认值:由浏览器决定
right 把文本排类到右边
center 把文本排类到中间
justify 实现两端对齐文本效果
首行缩进
text-indent:em或px
行高
line-height:px
文本装饰
text-decortion属性
值
none 默认值,定义标准文本
underline 设置文本下划线
overline 设置文本上划线
line-through 设置文本删除线
垂直对齐方式
vertical属性:middle、top、bottom 。
文本阴影
text-shadow:color x-offset y-offset blur-radius
字体属性
字体属性的顺序:字体风格----字体粗细----字体大小---字体类型
伪类名称 含义 实例
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited{color:#333;}
a:hover(记住) 鼠标悬浮上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active{color:#999;}
伪类样式
标签名:伪类名{声明;}
设置伪类的顺序 :a:link>a:visited>a:hover>a:active
list-style-type
none 无标记符号
disc 实心圆
circle 空心圆 list-style-type:none;
square 实心正方形
decimal 数字
list-style-image
list-sytle-position
list-style(记住)
背景颜色
background-color
transparent 透明色
背景图像
background-image:url(图片路径)
背景重复方式
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
背景定位
background-position属性
值 含义
xpos 单位:px,Xpos表示水平位置,Ypos表示垂直位置
X% Y% 使用百分比表示背景位置
X Y方向关键字 水平方向关键字:left center right
垂直方向关键词:top center bottom
背景尺寸 background-size
属性值 描述
auto 默认值,使用背景图片保持原样
percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的而相对元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适合所定义背景的区域
线性渐变
颜色沿着一条直线过渡;从左到右、从右到左、从上到下
语法
liner-gradient{position(渐变方向)color1,color2,...)
经向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,从而从一个起点朝所有方向混合
CSS3美化网页元素的更多相关文章
- HTML 第5章CSS3美化网页元素
<span>标签: <span>标签是用来组合HTML文档中的行内元素,它没有固定的格式表示. 字体样式: 属性名 ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- CSS美化网页元素
<span>标签 </span>属性名 含义 举例font-family 设置字体类型 font-family:"隶书"font-size 设置字体大小 f ...
- CSS3美化网页!!
一.span标签:能让某几个文字或者某个词语凸显出来 <p> 今天是11月份的<span>第一天</span>,地铁卡不打折了 ...
- 第五章 CSS美化网页元素
一.span标签:能让某几个文字或者某个词语凸显出来 <p> 今天是11月份的<span>第一天</span>,地铁卡不打折了 </p> 二.字体风格 ...
- CSS 美化网页元素
一.为什么使用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验 二 ...
- 学习笔记 第五章 使用CSS美化网页文本
第五章 使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
- css3美化复选框checkbox
两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复 ...
- 【学】CSS3基础实例1 - 用CSS3做网页中的小三角,以及transition的用法
自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...
随机推荐
- Linux显示服务器完整的状态信息
Linux显示服务器完整的状态信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ apachectl [fullstatus] Usage: /usr/sbi ...
- python学习之字典(Dictionary)练习
Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型 字典中分为键值对 , key 类型需要时被哈希. value 类型可以是 字符串.数字.元组等其他容器模 ...
- Codeforces Round #432 Div. 1 C. Arpa and a game with Mojtaba
首先容易想到,每种素数是独立的,相互sg就行了 对于一种素数来说,按照的朴素的mex没法做... 所以题解的简化就是数位化 多个数同时含有的满参数因子由于在博弈中一同变化的,让他们等于相当于,那么这样 ...
- 内置函数:filter函数
功能: filter函数用于过滤序列,将满足条件的元素取出来构成新的序列. 用法: filter(function, iterable) 接受两个参数,第一个函数为过滤函数(返回True后者False ...
- 【CJOJ1372】【洛谷2730】【USACO 3.2.5】魔板
题面 Description 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 5 我们知道魔板的每一个方格都有一种颜色 ...
- [BZOJ2467] [中山市选2010] 生成树 (排列组合)
Description 有一种图形叫做五角形圈.一个五角形圈的中心有1个由n个顶点和n条边组成的圈.在中心的这个n边圈的每一条边同时也是某一个五角形的一条边,一共有n个不同的五角形.这些五角形只在五角 ...
- 关于 CI框架访问数据库类提示Call to undefined function mysqli_init() 问题解决
我上次实践发现,安装在Win10 WampServer3.0.4集成环境,不仅打不开phpmyadmin会报错就算了,而且报错后又没提示那么解决,同时你打开php扩展配置发现,WampServer系统 ...
- CodeFirst之深入了解EntityFramework
一.概要 本文在基于CodeFirst思想之上 深入了解EntityFramework.其实我个人一直头疼的问题就是每次Entity类一有变动,无论是新增表,更改表结构等 EF一律把数据库删掉重建,这 ...
- 24时区,GMT,UTC,DST,CST时间详解
全球24个时区的划分 相较于两地时间表,可以显示世界各时区时间和地名的世界时区表(World Time),就显得精密与复杂多了,通常世界时区表的表盘上会标示着全球24个时区的城市名称,但究竟 ...
- Spring Boot初探之restful服务发布
一.背景 Spring boot是集服务发布.数据库管理.日志管理等于一身的服务开发框架:是微服务开发的全能小帮手.这章讲述一下如何使用spring boot发布restful服务接口. 二.搭建基础 ...