一、元素内容的字体属性

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. Android应用开发提高篇（4）-----Socket编程（多线程、双向通信）

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/04/2379628.html 一.概述 关于Socket编程的基本方法在基础篇里已经讲过,今天把 ...

  2. poj 3764 The xor-longest Path Trie

    题目链接 求树上的一条最长异或路径. 定义f(u, v)为u到v的路径, 那么显然f(1, u)^f(1, v) = f(u, v), 想不到这个就没有办法做. 然后就可以用字典树查询+插入了. 用指 ...

  3. kali nessus 安装插件失败解决方法

    code码获取: http://www.tenable.com/products/nessus/select-your-operating-system 首先切换到nessus安装目录下: 1.nes ...

  4. 百度2017笔试题：寻找n个员工中未打卡的那一个

    声明:图片来自网络,笔者只是试着做了一下,然后做个记录. 拿到这个题目的时候,笔者首先想到的是二分.两个数组,一个是全体员工的集合A:一个是缺少一人的集合B.对A,B排序,再对B进行二分,得到B的中间 ...

  5. 微软Xbox360 E与微软Xbox360 slim Kinect套装(1TB)哪个好

    原文地址:http://product.pchome.net/digi_home_playstation_microsoft_xbox360slimkinect1tb/381793.html 微软Xb ...

  6. QQwry

    http://blog.runphp.net/archives/156 http://wenku.baidu.com/link?url=yvd3_EpMM66r6H4qkx3oqcaU2JZNAQv_ ...

  7. 滚动条QScroolBar实现滚屏功能（屏幕过大，覆盖wheelEvent来处理滑轮事件）

    环境:Qt5 编译器:Qt Creator 需求:如图 显示区域win 600*300 需要显示的Widget控件show 590*550 则有600*250的show界面无法显示 使用滑块控制sho ...

  8. Python的安装和详细配置(转)

    Python是一种面向对象.解释型计算机程序设计语言.被认为是比较好的胶水语言.至于其他的,你可以去百度一下.本文仅介绍python的安装和配置,供刚入门的朋友快速搭建自己的学习和开发环境.本人欢迎大 ...

  9. HDU 1551 Cable master

    题解:很显然的二分检索,在算法艺术上看过原题,不过这里要注意精度: #include <cstdio> int n,m; ]; bool test(double x){ ,i; ;i< ...

  10. Node log4js

    一个完善的项目,日志是必不可少的一部分,在node开发中,调试成了让开发者头疼的部分,因此日志成为在node中帮助调试的一个重要模块. 一.Node使用Log4js 1.使用npm工具,在命令行中 执 ...