CSS美化网页元素
<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,...)
经向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,从而从一个起点朝所有方向混合
希望对你有所帮助!!!
CSS美化网页元素的更多相关文章
- CSS 美化网页元素
一.为什么使用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验 二 ...
- 第五章 CSS美化网页元素
一.span标签:能让某几个文字或者某个词语凸显出来 <p> 今天是11月份的<span>第一天</span>,地铁卡不打折了 </p> 二.字体风格 ...
- 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)
推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...
- 学习笔记 第五章 使用CSS美化网页文本
第五章 使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
- HTML 第5章CSS3美化网页元素
<span>标签: <span>标签是用来组合HTML文档中的行内元素,它没有固定的格式表示. 字体样式: 属性名 ...
- CSS3美化网页元素
<span>标签 </span>属性名 含义 举例font-family 设置字体类型 font-family:"隶书"font-size 设置字体大小 f ...
- selenium3+python3自动化测试学习之网页元素定位
selenium基础实战之定位网页元素技巧 selenium定位网页元素 find_element_by_id,find_element_by_name,find_element_by_class_n ...
- CSS美化自己的完美网页
CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...
- Scrapy学习系列(一):网页元素查询CSS Selector和XPath Selector
这篇文章主要介绍创建一个简单的spider,顺便介绍一下对网页元素的选取方式(css selector, xpath selector). 第一步:创建spider工程 打开命令行运行以下命令: sc ...
随机推荐
- VxWorks嵌入式系统几种常用的延时方法
1 taskDelay taskDelay(n)使调用该函数的任务延时n个tick(内核时钟周期).该任务在指定的时间内主动放弃CPU,除了taskDelay(0)专用 于任务调度(将CPU交 ...
- JSP标签c:forEach报错(一)
1.jsp标签c:forEach报错,具体错误如下: 三月 31, 2014 9:31:14 下午 org.apache.catalina.core.StandardWrapperValve invo ...
- Windows控制台下绘制简单图形
最近接触到一个很有意思的问题,如何在Windows控制台下画图,翻遍了C的头文件也没找到画图的函数,好吧,那就用Windows提供的API函数吧,看来想移植是没戏了.先画一个简单的图,类似心电图那种吧 ...
- Flex和Servlet结合上传文件
Flex和Servlet结合上传文件 1.准备工作 (1)下载文件上传的组件,commons-fileupload-1.3.1.jar (2)下载文件输入输出jar,commons-io-2.4.ja ...
- Caused by: com.mysql.jdbc.MysqlDataTruncation: Data truncation: Truncated incorrect DOUBLE value: 'L
1.错误描述 [ERROR:]2015-06-08 09:49:42,523 [异常拦截] org.hibernate.exception.DataException: error executing ...
- java特征
java的核心是面向对象,与之相对的是面向过程的编程,在对整个java编程没有足够的理解和运用的情况下恐怕没办法很好的理解这两个概念. 在我的初步理解中,写一个程序就例如做一件事情,面向过程的思想或许 ...
- 代码管理必备-----git使用上传码云
作为一个程序员,你要学会代码的管理,这是一个最基本的修养,就像是一个剑客的剑谱,代码管理,目前流行的是svn和git,但是很不好的是git如果没有插件的话,很多人都不会用git bash 来实现自己的 ...
- 小白学爬虫-批量部署Splash负载集群
整体目录如下: study@study:~/文档/ansible-examples$ tree Splash_Load_balancing_cluster Splash_Load_balancing_ ...
- Excle巧取汉字打头的字串内容
处理表格数据时遇到问题:从网页表格中复制来的数据,地址一列中出现类似于“4AWZCX万载老林业局2”的无用字符前缀.现在希望提取第一个汉字及其之后的所有内容(图1),寻求高效分离中英文及数字的实操方法 ...
- Java中使用UDP实现简单的聊天功能
通过DatagramSocket类来实现.此类表示用来发送和接收数据报包的套接字. 发送端代码如下: import java.io.IOException; import java.net.*; im ...