css基础(二)
一、元素内容的字体属性
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基础(二)的更多相关文章
- css基础二
1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...
- css基础总结一
最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- CSS 基础(二)
本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...
- 两天学会css基础(二)
接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
- Bootstrap <基础二十八>列表组
列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...
- Bootstrap<基础二十七> 多媒体对象(Media Object)
Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
随机推荐
- LOJ 1370 Bi-shoe and Phi-shoe(欧拉函数的简单应用)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1370 题意:给你n个整数,第i个整数为Xi.定义phi(k)为k的欧拉函数值,设pi为 ...
- sort 与 qsort
很长一段时间搞不明白 sort 和 qsort 的区别,平时在写程序时习惯了使用 sort ,因为它用起来比 qsort 要简单的多 , 这里详细介绍一下 sort 与 qsort : 给出一个数组 ...
- Spring学习之注入方式
我们知道,Spring对象属性的注入方式有两种:设值注入和构造注入. 假设有个类为People,该对象包含三个属性,name和school还有age,这些属性都有各自的setter和getter方法, ...
- mysql 本机root密码忘记
1.找到对应的my.conf,在mysqld节点添加:skip-grant-tables 2.重启mysql 即可无密登录 3.update user表中的密码后,去除skip-grant-tabl ...
- jquery左右自适应伸缩插件
简单css布局 body { margin: 0 auto; padding: 0 auto; } .showpannal { position:absolute; left: 200px; top: ...
- Java 日期字符串与日期类型转换
1.SimpleDateFormat.format 把日期类型转化到指定格式字符串 public static String convToString(Calendar cld,String temp ...
- Asp.net Role manager tutorial
It is very useful in .net we can user framework provided role manager, and easily configure in Web.C ...
- ajaxFileUpload用法
首先要引入两个js <script type="text/javascript" src="/static/js/jquery.js"></s ...
- 【转】Win7下VS2010中配置Opencv2.4.4的方法(32位和64位都有效)(亲测成功)
在vs2010下配置opencv是件痛苦的事情,一点点错误可能就会导致莫名其妙的报错,各种error让人郁闷不已,这里提供给大家一篇vs2010下配置opencv2.4.4的方法,我是64位的win7 ...
- 再探java基础——break和continue的用法
再探java基础——break和continue的用法 break break可用于循环和switch...case...语句中. 用于switch...case中: 执行完满足case条件的内容内后 ...