文本属性和字体属性,超链接导航栏案例 background
文本属性
介绍几个常用的。
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值:none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离,单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值:none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思,指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小,如果设置成inherit
表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值:none(默认值,标准粗细) | bold(粗体) | border(更粗)| lighter(更细) | 100~900(设置具体粗细,400等同于normal,而700等同于bold)| inherit(继承父元素字体的粗细值)
字体系列
font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
行高 line-height
针对单行文本垂直居中
公式:行高的高度等于盒子的高度,可以使当行文本垂直居中,注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。
第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px; 那么就知道行高*5=150px
第二步,让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
font-family介绍
使用font-family注意几点:
1.网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装,
比如你设置: font-family: "华文彩云"; 如果用户电脑里面没有这个字体,
那么就会变成宋体
页面中,中文我们只使用: 微软雅黑、宋体、黑体。
如果页面中,需要其他的字体,那么需要切图。 英语:Arial 、 Times New Roman
2.为了防止用户电脑里面,没有微软雅黑这个字体。
就要用英语的逗号,隔开备选字体,就是说如果用户电脑里面,
没有安装微软雅黑字体,那么就是宋体:
font-family: "微软雅黑","宋体"; 备选字体可以有无数个,用逗号隔开。
3.我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,
就自动的变为后面的中文字体:
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体,都有英语别名,
我们也要知道: 微软雅黑的英语别名:
font-family: "Microsoft YaHei";
宋体的英语别名: font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比,表示字号的百分之多少。
一般来说,都是大于100%的,因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来,比如: font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
超链接导航栏案例
直接上代码了
html结构
<div class="nav">
<ul>
<li>
<a href="">路飞学城</a>
</li>
<li>
<a href="">老男孩</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
<li>
<a href="">网站导航</a>
</li>
</ul>
</div>
写好上面的结构代码之后,也就是将我们页面展示的内容显示了,但是我们此时要利用我们学过的知识点来布局页面
首先我们要做导航栏,并排显示元素,第一想 浮动,想到使用浮动之后,一定记得清除浮动元素。
css代码如下:
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto ;
background-color: purple;
/*设置圆角*/
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Hanzipen SC';
}
/*a标签除外,不继承父元素的color*/ .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
background
白guang特
1、颜色表示法
颜色一共有三种表示方法:单词、rgb表示法、十六进制表示法。
rgb表示法:
rgb:红色 绿色 蓝色 三原色。
光学显示器,每个像素都是由三原色的发光原件组成的,靠明亮度不同调成不同的颜色的。
用法:rgb(111,234,123); r、g、b的每个值的取值范围0~255。
十六进制表示法:
所有用#开头的值,都是十六进制的。
用法:#a0a0a0; #112233;可以简写成#123;
2、background-color 属性表示设置背景颜色
用法:
3、background-image 表示设置该元素的背景图片
用法:background-image:url('paper.gif');
4、background-repeat 表示设置该元素的平铺方式
用法:background-repeat:repeat(默认)|repeat-x|repeat-y|no-repeat|inherit;
5、background-position 表示设置背景图片的位置
background-position: x% y%|Xpx Ypx; /*第一个值是水平位置,第二个值是垂直位置*/
6、图片精灵技术
CSS雪碧,即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
CSS 精灵图应用原理:
只有一张大的合并图, 每个小图标节点如何显示单独的小图标呢?其实就是截取大图一部分显示,而这部分就是一个小图标。
使用精灵图的好处:
1)利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
2)CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和;
3)解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率;
4)更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便;
使用精灵图的不足:
1)CSS精灵图的最大问题是内存使用;
2)拼图维护比较麻烦;
3)使CSS的编写变得困难;
4)CSS精灵图调用的图片不能被打印;
7、应用:我们可以使用background综合属性制作通天banner,什么是通天banner呢,就是一般我们电脑的屏幕都是1439,但是设计师给我们的banner图都会比这个大,那么我们可以此属性制作通天banner,如下:background: red url(images/banner.jpg) no-repeat center top;
______________________________________________________________________________
一、文本属性和字体属性(常用的)
1、文本属性
text-align:left|right|center|justify(两端对齐,只适用于英文); /*对齐方式*/
color:色值; /*文本颜色*/
text-indent:2em; /*首行缩进,建议单位用em*/
text-decoration:none|underline|overline|line-through|inherit;
line-height:高度值;
2、字体属性
font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300没区别*/
font-family:字体;
a、网页中不是所有字体都能显示,因为这个字体要看用户的电脑里面装没装,比如你设置:font-family:”华文彩云”;如果用户电脑里面没有这个字体,那么就会变成宋体 ;
b、为了防止用户电脑里面没有你设置的那个字体,我们通常写多个用逗号隔开的备选字体,如:font-family: "Times New Roman","微软雅黑";备选字体可以有无数个,默认显示第一个,没有安装第一个就显示第二个,以此类推,都没装就显示宋体 ;
c、我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体 ;
d、所有的中文字体,都有英语别名,微软雅黑的英语别名是:”Microsoft YaHei”,宋体的英语别名是:”SimSun”;
e、font属性能够将font-size、line-height、font-family合三为一: font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
f、行高可以用百分比,表示字号的百分之多少,也可以用em单位,表示字号的几倍。一般来说,都是大于100%的,因为行高一定要大于字号。例如:
font:12px/200% “宋体”;或者font:12px/2em “宋体”;等价于 font:12px/24px “宋体”;反过来,比如: font:16px/48px “宋体”;等价于 font:16px/300% “宋体”;或者font:16px/3em “宋体”;
文本属性和字体属性,超链接导航栏案例 background的更多相关文章
- python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)
昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- css 01-CSS属性:字体属性和文本属性
01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...
- python全栈开发day40-浮动的四大特性,浮动带来的问题和解决问题,文本属性、字体属性和颜色介绍
一.昨日内容总结 1.盒模型及其属性 2.文本级标签.行内块.块级标签 3.继承性.层叠性.权重 4.浮动四大特性 # 浮动元素脱离标准文档流 # 贴靠 # 字围效果 # 自动收缩或紧缩 二.今日内容 ...
- css 文本属性和字体属性
1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- jQuery---固定导航栏案例
固定导航栏案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- CSS样式----CSS属性:字体属性和文本属性(图文详解)
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 2018.12.22 bzoj3277: 串(后缀自动机+启发式合并)
传送门 跟这道题是一模一样的. 于是本蒟蒻又写了一遍10min1A庆祝 代码: #include<bits/stdc++.h> #define ri register int using ...
- java 后台 post请求 携带参数 远程操作 调用接口
package com.huayu.tizong.matchteam.util; import java.io.BufferedReader; import java.io.IOException; ...
- 第24章:MongoDB-聚合操作--MapReduce
①MapReduce 在MongoDB的聚合框架中,还可以使用MapReduce,它非常强大和灵活,但具有一定的复杂性,专门用于实现一些复杂的聚合功能. MongoDB中的MapReduce使用Jav ...
- navigtor对象和插件检测
每一个浏览器都内置了属于自己的一套属性和方法 浏览器中navigator对象有plugins属性对象存着插件的数组 每一项包含: name 插件名称 description 插件的描述 filenam ...
- tp5,thinkphp5,隐藏index.php,隐藏入口文件
一.找到/public/.htaccess文件 Apache: <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews R ...
- js基础学习笔记(零七)
indexOf() 方法 返回某个指定的字符串值在字符串中首次出现的位置. 语法: stringObject.indexOf(substring, startpos) 参数说明: 注意:如果要检索的字 ...
- command not found Operation not permitted
mysql -uroot -p 报错误:command not found 因为苹果在OS X 10.11中引入的SIP特性使得即使加了sudo(也就是具有root权限)也无法修改系统级的目录,其中 ...
- CF每日一题系列 —— 415A
http://codeforces.com/problemset/page/7?order=BY_SOLVED_DESC 从5000以内选的,emmm还是比较水的哈 时间还是有的,所以万事万物贵在坚持 ...
- python之随机验证码
一.内置函数 chr ------把数字转换为字母 ord-------把字母转换为数字 n = chr(65) print (n) m = ord("A") print(m) 二 ...
- scikit-FEM-例2-用Morley元在方形区域上解板弯曲问题
""" Author: kinnala Solve the Kirchhoff plate bending problem in a unit square with c ...