css学习(2)-- 常见的CSS属性和值
1、CSS中修饰字体的属性
属 性 |
描 述 |
属 性 值 |
font-family |
字体族科 |
任意字体族科名称都可以使用例如Times、serif等,而且多个族科的赋值是可以使用的,中间用逗号分隔,以防止选择不存在的字体族科 |
font-size |
字体大小 |
可以使用绝对大小、相对大小、长度或百分比 |
font-style |
字体风格 |
normal(普通),italic(斜体)或oblique(倾斜) |
font-weight |
字体加粗 |
normal、bold、bolder或lighter等 |
font-variant |
字体变形 |
normal(普通)或small-caps(小型大写字母) |
font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>
2、CSS中常见的控制文本的属性
属 性 |
描 述 |
属 性 值 |
letter-spacing |
字母间隔 |
该值必须符合长度格式,允许使用负值 |
word-spacing |
文字间隔 |
该值必须符合长度格式,允许使用负值 |
text-decoration |
文字修饰 |
underline(下划线),overline(上划线),line-through(删除线),blink(闪烁),或默认地使用无 |
text-align |
横向排列 |
left、right、center或justify |
text-indent |
文本缩进 |
该值必须是一个长度或一个百分比,若百分比则视上级元素的宽度而定 |
line-height |
行高 |
可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值 |
3、CSS中常见的控制背景的属性
属 性 |
描 述 |
属 性 值 |
background-color |
背景颜色 |
值和color属性值设定方式相同,或使用transparent(透明)值 |
background-image |
背景图象 |
图片URL或none(无) |
background-repeat |
背景重复 |
repeat、repeat-x、repeat-y、no-repeat |
background-attachment |
背景附件 |
scroll(滚动)或fixed(固定) |
background-position |
背景位置 |
横向的关键字(left, center, right),纵向的关键字(top, center, bottom)百分比和长度也可用做安排背景图象的位置 |
background: <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>
4、应用多个图标放到同一个图片里
多个图标放到同一个图片里,通过定义某区块的背景定位,调用同一个图片中不同位置上的小图标,好处是可以减少对服务器的请求次数,从而加快页面的访问速度
5.边框属性
任何一个元素都可以设置边框
边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写,可以一起设置4边的边框,也可对上边框、右边框、下边框和左边框单独设置。
可以通过边框风格属性border-style设定上下左右边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
如果给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等
也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格
1.各边的风格使用的属性值:
none:没有边框,无论边框宽度设为多大
dotted:点线式边框
dashed:破折线式边框
solid:直线式边框
double:双线式边框
groove:槽线式边框
ridge:脊线式边框
inset:内嵌效果的边框
outset:突起效果的边框
2.边框宽度属性
以通过边框宽度属性border-width设定上下左右边框的宽度,该属性用1到4个值来设置元素的边界,值是一个关键字或长度,不允许使用负值长度。
如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。
如果只给出一个值,它将被运用到各边上。
如果两个或三个值给出了,省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。
除了可以使用长度单位定值外,还可以用medium(是默认值)、 thin(比medium细)或thick(比medium粗)值。
3.边框颜色属性
可以通过边框颜色属性border-color设定上下左右边框的颜色,可以使用1到4个关键字。如果四个值都给出了,它们分别应用于上、右、下和左边框的式样。如果给出一个值,它将被运用到各边上。如果两个或三个值给出了,省略了的值与对边相等。
4.略写的边框属性
CSS属性border是边框属性的一个快捷的综合写法,是一个用于设置一个元素边框的宽度、式样和颜色的略写,它包含border-width,border-style和border-color属性。
边框属性border只能设置四种边框,也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。
6.鼠标光标属性
在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default、小手形状hand、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及各个方向的箭头属性值。
7.CSS中常见的控制列表的属性
属 性 |
描 述 |
list-style-type |
设定引导列表项的符号类型,可以设置多种符号类型,值为disc、circle、square等 |
list-style-image |
使用图像作为定制列表符号 |
list-style-position |
决定列表项目缩进的程度 |
css学习(2)-- 常见的CSS属性和值的更多相关文章
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2
3 背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2 CSS中常见的控制背景的属性 除了使用表 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1
CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...
- CSS学习总结3:CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- css学习_css常见属性用法
1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block / in ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4
6 鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...
- Html和Css学习笔记-html进阶-html5属性
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3
5 边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a.边框风格属性 可以通过边框风格属性b ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5
CSS综合实例 在Web页面中经常使用栏目显示分类内容.本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用.通过使用独立的文件定义样式表,并在HTML文档中使用link标 ...
随机推荐
- iOS SHA1加密实现方法
使用方法 先导入头文件 #import "SHA1.h" //SHA1测试 NSString* sh1=[SHA1 getSha1String:"]; NSLog(@&q ...
- HDU 4865 Peter's Hobby(概率、dp、log)
给出2个影响矩阵,一个是当天天气对湿度的影响,一个是前一天天气对当天天气的影响. 即在晴天(阴天.雨天)发生Dry(Dryish.Damp.Soggy)的概率,以及前一天晴天(阴天.雨天)而今天发生晴 ...
- ajax传值方式为数组
js: function responseJson1(){ var array=[1001,1002]; var str=""; //获取table对象 ...
- 【Git】笔记3
来源:廖雪峰 远程仓库 远程仓库采用github 准备工作:创建远程仓库 1.创建一个github账号 2.在本地设置ssh,获取/home/user/.ssh/id_rsa.pub内容 3.在git ...
- POJ 3185 The Water Bowls (高斯消元)
题目链接 题意:翻译过来就是20个0或1的开关,每次可以改变相邻三个的状态,问最小改变多少次使得所有开关都置为0,题目保证此题有解. 题解:因为一定有解,所以我们可以正序逆序遍历两次求出较小值即可.当 ...
- 20145213《Java程序设计》实验报告一:Java开发环境的熟悉(Windows+IDEA)
20145213<Java程序设计>实验报告一:Java开发环境的熟悉(Windows+IDEA) 实验要求 使用JDK编译.运行简单的Java程序. 使用IDEA编辑.编译.运行.调试J ...
- chaper3_exerise_Uva1225_digit_counting
#include<iostream> #include<stdio.h> #include<cstring> using namespace std; ; int ...
- python基础——filter函数
python基础——filter函数 Python内建的filter()函数用于过滤序列. 和map()类似,filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函 ...
- Oracle读写分离架构
读写分离是架构分布式系统的一个重要思想.不少系统整体处理能力并不能同业务的增长保持同步,因此势必会带来瓶颈,单纯的升级硬件并不能一劳永逸.针对业务类型特点,需要从架构模式上进行一系列的调整,比如业务模 ...
- 无根树转有根树(dfs,tree)
#include <bits/stdc++.h> #include <iostream> #include <queue> #include <stdio.h ...