CSS学习笔记(二):特性

一、颜色特性

1. 前景色:color

用种方式指定前景色,3种方式分别是rgb颜色,#16进制编码,颜色名称:

color: rgb(100,100,100);
color: #ee3e80;
color: DarkCyan

2. 背景色:background-color

3. 透明度:opacity,rgba

color: rgba(0,0,0,0.5);
或
opacity: 0.5;

4. HSL颜色和HSLA:

HSL颜色的三个属性值为色调(0~360),饱和度(百分数),明度(百分数)。HSLA比HSL多一个透明度(0~1)表示。

background-color:hsla(0,100%,100%,0,5)

二、字体

1. 字体选用: font-family

可以指定多种字体,用逗号隔开,以防止用户浏览器没有安装其中的某些字体。

font-family: Georgia, Times, serif;

2. 字体大小:font-size

字体大小有3种表示方式,分别是像素,百分数,EM值:

像素:px表示

百分数:百分数表示,100%表示16px

em值:1em等于一个字母m的宽度

3. 粗体:font-weight

使该文本以粗体显示,bold为粗体,normal为普通粗细。

font-weight: bold;

4. 斜体:font-style

使文本以斜体显示,italic为斜体,oblique为倾斜,normal为普通字体。

font-style: italic;

5. 大小写:text-transform

使文本以大小写显示,uppercase为大写,lowercase为小写,capitalize为首字母大写。

text-transform: uppercase;

6. 下划线和删除线:text-decoration

可选值为:none无,underline下划线,overline顶部实线,line-through删除线,blink文字闪烁

text-decoration: underline

7. 行间距:line-height

行间距表示的是字母的下缘线到下一行字母的上缘线的距离,一般用em值表示,这样可按用户调整的字母的大小而改变。

line-height:1.4em

除行间距外,还有字母间距letter-spacing和单词间距word-spacing。

8. 对齐方式:text-align

用于控制文本的对齐方式,可选值为:left,right,center,justify(两端对齐)

9. 垂直对齐:vertical-align

用于内联元素,可选值为:baseline,sub,super,top,text-top,middle,bottom,text-bottom

10. 文本缩进:text-indent

对首行文本进行缩进,单位可为px或em。

text-indent: -9999px;

缩进值可为负数,即将文本左移出了屏幕外。

11. 文字投影:text-shadow(CSS3特性)

文字投影要指定3个长度和1个颜色,第一个长度阴影在左右方向的位移,第二个长度阴影在上下方向的偏移,第三个长度为阴影的模糊程度,最后一个颜色为阴影的颜色

text-shadow: -1px -2px 7px #111111;

12. 首字母或首行文本:  :first-letter, :first-line

:first-letter和:first-line并不是属性,应该称作为伪元素。在选择器的末尾指定伪元素,可以选定对象。

p.intro:first-letter{
font-size: 200%;
}
p.intro:first-line{
font-weight:bold;
}

13. 链接样式:  :link, :visited

:link和:visited是伪类。:link表示那些尚未访问过的链接的样式。:visited表示那些已经单击过的链接样式。

a:link {
color: deeppink;
}
a:visited{
color: black;
}

14. 相应用户:  :hover, :active, :focus

这三个都是伪类。

:hover 表示光标放在元素上时生效,对触摸屏无效

:active 表示操作时生效,比如按钮按下或者链接被点击

:focus 表示元素拥有焦点时有效

input.submit:hover {
background-color: #665544:
}
input.submit:active{
background-color: chocolate;
}

三、特性选择器

p[class] 所有包含class特性的<p>元素
p[class=‘dog‘] class特性值为‘dog‘的<p>元素
p[class~=‘dog‘] class特性值是以空格隔开的单词列表,其中有一个为‘dog‘
p[attr^"d"]  特定的<p>元素,其中某个特性的值以"d"开头
p[attr*"do"]  特定的<p>元素,其中某个特性的值中包含"do"
p[attr$"g"]  特定的<p>元素,其中某个特性以"g"结尾
时间: 2024-10-11 05:26:38

CSS学习笔记(二):特性的相关文章

css学习笔记二

2015年7月12日一.absolute1.注释符有去空格效果2.absolute有跟随性,最佳定位效果3.图片居中效果--在父元素里设置absolute,test-align:center 图片前用一个 空字符串然后图片<img src=""/>4.absolute不占空间,不影响页面布局5.absolute时z-index不起作用6.top ,bottom,left,right有拉伸作用IE7+可以替代width/height,内部元素可以自动拉伸.7.比较 正常情况下

Html+css学习笔记二 标题

学习新标签,标题 <html> <head> <title>tags</title> </head> <body> <h1>大</h1> <h2>大</h2> <h3>大</h3> <h4>大</h4> <h5>大</h5> <h6>大</h6> <h7>大</h7>

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

小猪的数据结构学习笔记(二)

小猪的数据结构学习笔记(二) 线性表中的顺序表 本节引言: 在上个章节中,我们对数据结构与算法的相关概念进行了了解,知道数据结构的 逻辑结构与物理结构的区别,算法的特性以及设计要求;还学了如何去衡量一个算法 的好坏,以及时间复杂度的计算!在本节中我们将接触第一个数据结构--线性表; 而线性表有两种表现形式,分别是顺序表和链表;学好这一章很重要,是学习后面的基石; 这一节我们会重点学习下顺序表,在这里给大家一个忠告,学编程切忌眼高手低,看懂不代表自己 写得出来,给出的实现代码,自己要理解思路,自己

JavaScript--基于对象的脚本语言学习笔记(二)

第二部分:DOM编程 1.文档象模型(DOM)提供了访问结构化文档的一种方式,很多语言自己的DOM解析器. DOM解析器就是完成结构化文档和DOM树之间的转换关系. DOM解析器解析结构化文档:将磁盘上的结构化文档转换成内存中的DOM树 从DOM树输出结构化文档:将内存中的DOM树转换成磁盘上的结构化文档 2.DOM模型扩展了HTML元素,为几乎所有的HTML元素都新增了innerHTML属性,该属性代表该元素的"内容",即返回的某个元素的开始标签.结束标签之间的字符串内容(不包含其它

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要的功能有: 可以通过id来获取用户123的指定id的卡     'GET'  'card/user/123/id' 可以获取用户123的所有的银行卡             'GET'  'card/user/123' 可以更新用户123的指定id的卡                'POST' '