一、元素内容的字体属性

1、font-family   字体名称，例如：宋体，新罗马字体等

注意：1、不能使用偏僻的字体，要使用安全字体，如：arial;verdana;times new roman 及宋体等；

2、可以同时制定多个字体，用逗号分隔，如果第一个字体不存在，浏览器可以使用后面的字体；

3、如果字体有许多单词组成，使用双引号组合；

body {font-family:verdana,"Courier New",Symbol;}

2、font-style  字体倾斜   属性：normal     italic    oblique

3、font-variant   字体变体   属性：normal   small-caps

注：small-caps 属性使用后，元素中的小写字母看起来比正常的大写字母小一些。

4、font-weight   字重   （加粗）  属性  normal   bold   bolder  lighter  100 -900

 注：1、400代表normal  700代表bold   bolder/lighter 表示字体的字重比父级元素高或低一级

2、有些字体的字重值为300-700。

p {font-style:normal;}

h1 {font-style:700;}

5、font-size  字体大小  属性：绝对大小/相对大小/长度/百分比

关键字： 绝对大小：xx-small / x-small / small / large / x-large / xx-large

相对大小：larger / smaller

p {font-size:20px;}

blockquote {font-size:larger;}

em {font-size:150%;}

font属性快捷方式：

P {font：xxx  xxx xxx xxx ;}书写顺序是：font-style  font-variant  font-weight  font-size;

二、元素内容的文本属性

1、首行缩进   text-indent         属性：length   percentage

p {text-indent:2px;}  段落P首行缩进2px;

2、文本对齐方式  text-align        属性：left  right  center

3、文本修饰方式  text-decoration          属性：none   underline   overline    line-through   blink(闪烁)

4、本阴影特效   text-shadow           属性：none   color

p {text-shadow:red;}  段落P 文本阴影特效设置为红色

5、行高   text-height             属性：数字（字体大小的倍数）   长度     百分比   normal

6、字间距   letter-spacing              属性： normal   length    auto

blockquote {letter-spacing:1px;}

7、词间距  word-spacing          属性：normal   length

h1 {word-spacing:1px;}

8、文本中字母大小写  text-transform           属性：capitalize(文本每句句首字母变为大写)          uppercase（文本全部字母变成大写）                                                                  lowercase（文本全部字母变为小写）    none

9、空白显示  white-space             属性：  normal    pre    nowrap

pre {white-space:pre;}

三、元素内容的字体颜色，背景

1、color：设定元素的前景色；             取值：十六进制值，rgb()函数或CSS承认的颜色名

2、background-color:设定背景色，初始值为透明；         取值：同上或者transparent

3、background-image：设定背景图案；        取值：图片的URL地址或者none

4、background-repeat：背景图像是否及如何铺排        取值：repeat   no-repeat    repeat-x    repeat-y

5、background-attachment:背景图像是随对象内容滚动还是固定         取值：scroll    fixed

6、background-position:用于指定图片的位置          取值：百分比    length   top  center   bottom   left   center   right

四、列表格式  ( 列表属性用于设置网页中列表的格式，例如 可以设置图像作为项目符号)

list-style-type 属性可以用来设置项目符号和编号的样式   取值：

disc:   默认值，实心黑点

circle：  空心圆圈

square：   方形黑块

decimal：   十进制数（1.2.3.4等）

lower-roman：   小写罗马数字 （i  ii等）

upper-roman：   大写罗马数字

lower-alpha  ：小写字母

upper-alpha：大写字母

none

例如：<head><style>

ol {list-style-type:upper-alpha;}   ol是有序列表

</style></head>

注意：还可以利用该属性将列表前面的符号换成图片，属性值可以是图片的URL地址，

如果同时制定了list-style-type    和   list-style-image，则只有当浏览器不能显示图片作为项目符号是，list-style-type 才能生效。

五、css算法

1、所以的ID选择器，权值为100；

2、所以的Class 选择器，权值为10；

3、所以的标签（元素）选择器，权值为1；

4、所以的伪类，权值为1；

！important  优先级最高。{css中样式的继承属性有Color   font-size}

回答8.25  ps图片最后的提问：如何将初始单位改为像素：

打开ps软件，编辑----首选项----单位与标尺，修改即可。

css基础（二）的更多相关文章

  1. css基础二

    1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...

  2. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  3. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  4. CSS 基础（二）

    本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...

  5. 两天学会css基础（二）

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  8. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  9. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  10. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. LOJ 1370 Bi-shoe and Phi-shoe（欧拉函数的简单应用）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1370 题意:给你n个整数,第i个整数为Xi.定义phi(k)为k的欧拉函数值,设pi为 ...

  2. sort 与 qsort

    很长一段时间搞不明白 sort 和 qsort 的区别,平时在写程序时习惯了使用 sort ,因为它用起来比 qsort 要简单的多 , 这里详细介绍一下 sort 与 qsort : 给出一个数组 ...

  3. Spring学习之注入方式

    我们知道,Spring对象属性的注入方式有两种:设值注入和构造注入. 假设有个类为People,该对象包含三个属性,name和school还有age,这些属性都有各自的setter和getter方法, ...

  4. mysql 本机root密码忘记

    1.找到对应的my.conf,在mysqld节点添加:skip-grant-tables  2.重启mysql 即可无密登录 3.update user表中的密码后,去除skip-grant-tabl ...

  5. jquery左右自适应伸缩插件

    简单css布局 body { margin: 0 auto; padding: 0 auto; } .showpannal { position:absolute; left: 200px; top: ...

  6. Java 日期字符串与日期类型转换

    1.SimpleDateFormat.format 把日期类型转化到指定格式字符串 public static String convToString(Calendar cld,String temp ...

  7. Asp.net Role manager tutorial

    It is very useful in .net we can user framework provided role manager, and easily configure in Web.C ...

  8. ajaxFileUpload用法

    首先要引入两个js <script type="text/javascript" src="/static/js/jquery.js"></s ...

  9. 【转】Win7下VS2010中配置Opencv2.4.4的方法（32位和64位都有效）（亲测成功）

    在vs2010下配置opencv是件痛苦的事情,一点点错误可能就会导致莫名其妙的报错,各种error让人郁闷不已,这里提供给大家一篇vs2010下配置opencv2.4.4的方法,我是64位的win7 ...

  10. 再探java基础——break和continue的用法

    再探java基础——break和continue的用法 break break可用于循环和switch...case...语句中. 用于switch...case中: 执行完满足case条件的内容内后 ...