文本属性

介绍几个常用的。

文本对齐

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的更多相关文章

  1. python 全栈开发,Day49(超链接导航栏案例,background,定位,z-index,iconfont使用)

    昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块 ...

  2. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  3. css 01-CSS属性:字体属性和文本属性

    01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素 ...

  4. python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  5. python全栈开发day40-浮动的四大特性,浮动带来的问题和解决问题,文本属性、字体属性和颜色介绍

    一.昨日内容总结 1.盒模型及其属性 2.文本级标签.行内块.块级标签 3.继承性.层叠性.权重 4.浮动四大特性 # 浮动元素脱离标准文档流 # 贴靠 # 字围效果 # 自动收缩或紧缩 二.今日内容 ...

  6. css 文本属性和字体属性

    1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. jQuery---固定导航栏案例

    固定导航栏案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  8. CSS样式----CSS属性:字体属性和文本属性(图文详解)

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. New users can not log on Win8

    方案: http://www.eightforums.com/tutorials/38838-user-profile-service-failed-sign-fix-windows-8-a.html ...

  2. VB.NET and C# 差异

    VB.NET Program Structure C# Imports System Namespace Hello    Class HelloWorld       Overloads Share ...

  3. c# 通过按钮获取文件夹和打开磁盘文件

    Button控件获取文件夹: FolderBrowserDialog fileDialog = new FolderBrowserDialog(); if (fileDialog.ShowDialog ...

  4. curl命令整理

    ##curl命令 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件. #####1. 下载单个文件,默认将输出打印到标准输出中(STDOUT)中``` c ...

  5. canvas和图片互转

    原文:http://www.jb51.net/html5/160920.html 这么神奇么?先记录一下. 使用JavaScript将图片拷贝进画布 要想将图片放入画布里,我们使用canvas元素的d ...

  6. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...

  7. 网络编程之IO模型

    IO模型的分类 blocking IO:阻塞IO nonblocking IO:非阻塞IO IO multiplexing:IO多路复用 signal driven IO:异步IO 通常情况下IO默认 ...

  8. poj--2299(树状数组+离散化)

    一.离散化: https://www.cnblogs.com/2018zxy/p/10104393.html 二.逆序数 AC代码: #include<iostream> #include ...

  9. 实例讲解Silverlight 初始控件如何获得焦点

    这个问题本来是在我实际的项目中遇到过的,但这其实是当初项目要求,要求一进入就要使得在用户名那个文字框中聚焦,而不是再用鼠标去点击获得焦点,后来自己费了点时间解决了.本来我没太注意就过去了,没想到在QQ ...

  10. 手把手教Electron+vue的使用

    .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...