一.CSS是什么
CSS(Cascading Style Sheets)
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。
二.CSS基础
1.CSS样式规则
如图:
具体写法如下:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: orange;
font-size:26px;
font-family: "宋体";
}
</style>
</head>
<body>
<p>我是中国人</p>
</body>
在head中设置style标签,然后使用 选择器 { 属性:值; 属性:值; } 的格式为某一个标签设置样式,这里是设置了p标签
这里的选择器也叫标签选择器,就是用html标签名作为选择器。
2.字体设置
- font-size:字号大小,一般用px来作为单位
- font-family:字体,如微软雅黑,宋体等
- font-weight:字体粗细
- font-style:字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:normal:默认值,italic:倾斜
font:综合设置字体样式
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size font-family;}
使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
<style>
p{
font:italic bold 18px "微软雅黑";
color:red;
}
</style>
效果:
3.选择器(seletor)
1.标签选择器
标签选择器就是使用html标签来选择,就是上面使用的
选择了比如p,或者h2,div这样的标签,那么整个页面的某类标签就会变成该样式。
2.类选择器
使用class 和 . 符号来配合选择,如:
<head>
<meta charset="UTF-8">
<style>
.vv {
font:italic bold 18px "微软雅黑";
color:red;
}
</style>
</head>
<body>
<div class="vv">飞飞飞</div>
</body>
3.多类名选择器
多类名选择器就是class中放置多个类名,然后在style中设置,如:
<head>
<meta charset="UTF-8">
<style>
.beijing {
color:red;
}
.f-beijing {
font-size: 50px;
}
</style>
</head>
<body>
<span class="beijing f-beijing">上海</span>
</body>
这个是为了在页面较复杂时,灵活的设置样式
4.id选择器
id选择器和类选择器用法一致,只是将class换成id,然后将 . 符号换成 # 符号而已如:
<head>
<meta charset="UTF-8">
<style>
#vv {
font:italic bold 18px "微软雅黑";
color:red;
}
</style>
</head>
<body>
<div id="vv">飞飞飞</div>
</body>
5.id选择器和类选择器的区别:
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次
如:
<body>
<div class="vv">飞飞飞</div>
<div class="vv">飞飞飞</div> 可行,可以使用多次
<div id="gg">飞飞飞</div>
<!-- <div id="gg">飞飞飞</div> 错误,只能使用一次-->
</body>
6.通配符选择器
*代表所有元素
<head>
<meta charset="UTF-8">
<style>
* {
color:red;
}
</style>
</head>
<body>
<p>啦啦啦</p>
<h2>飞飞飞</h2>
<h3>飞飞飞</h3>
</body>
效果:
7.伪类选择器
伪类:Pseudo-classes,伪类选择器也是一种选择器,用冒号:表示 , 目的是添加一些选择器的特殊效果。
如超链接标签a,可以对a添加特殊效果:如:
<style>
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
</style>
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。既LVHA顺序必须不能更改,可以记成love-hate.
伪类可以与 CSS 类配合使用:
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
如果在上面的例子的链接已被访问,它会显示为红色。
结构伪类选择器:
如:
<style>
p:first-child { /* 选择第一个孩子 */
color: pink;
}
p:last-child { /* 最后一个孩子 */
color: red;
}
p:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: blue;
}
</style>
<body>
<p>第一个</p>
<p>第二个</p>
<p>第三个</p>
<p>第四个</p>
<p>第五个</p>
</body>
效果:
如下是所有伪类选择器:
选择器 | 示例 | 示例说明 |
---|---|---|
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:empty | p:empty | 选择所有没有子元素的p元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:invalid | input:invalid | 选择所有无效的元素 |
:last-child | p:last-child | 选择所有p元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
:not(selector) | :not(p) | 选择所有p以外的元素 |
:nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
:optional | input:optional | 选择没有"required"的元素属性 |
:out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
:read-only | input:read-only | 选择只读属性的元素属性 |
:read-write | input:read-write | 选择没有只读属性的元素属性 |
:required | input:required | 选择有"required"属性指定的元素属性 |
:root | root | 选择文档的根元素 |
:target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
:valid | input:valid | 选择所有有效值的属性 |
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
1.交集选择器
交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special
交集选择器 是 并且的意思。 即...又...的意思
比如: p.one 选择的是: 类名为 one 的 段落标签。
2.并集选择器
并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。
并集选择器是 和 的意思, 就是说,只要逗号隔开的,所有选择器都会执行后面样式。
比如 :
.one, p , #test {
color: #F00;
}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。 通常用于集体声明。
3.后代选择器
后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
后代选择器的功能极其强大。有了它,可以使 HTML 中不可能实现的任务成为可能。
<style >
h1 em {color:red;}
</style>
<body>
<h1>This is a <em>important</em> heading</h1>
</body>
将h1标签下的所有em标签 设置为红色
效果:
有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
4.子元素选择器
如果不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,可以使用子元素选择器(Child selector)
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意 > 符号左右两侧各保留一个空格。
白话: 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
比如:
.demo > h3 {color: red;}
说明 h3 一定是demo 亲儿子。 demo 元素包含着h3
子元素选择器 只会选择儿子,而不会选择孙子,如下:
第二行的strong是em的子元素,这样就无法变成红色。只有第一行能变红
<style >
h1 > strong {color:red;}
</style>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important </h1>
<h1>This is <em>really <strong>very</strong></em> important</h1>
</body>
总结下选择器:
- # 用于选择id, id选择器
- . 用于选择class ,类选择器 和 交集选择器
- : 用于 伪类选择器
- ,用于并集选择器
- 空格 用于后代选择器
- > 用于子类选择器
四.CSS外观样式
1.文本的对齐方式,行高和首行缩进:
- text-align可以设置水平对齐方式,有center,left 和right的常用属性
- line-height可以设置行高,一般用px做单位
- text-indent可以设置首行缩进,2em代表:2个字符的缩进,如果是文本内容为汉字,则缩进两个汉字
<head>
<meta charset="UTF-8">
<style>
h3 {
text-align: center;
}
p{
line-height:30px;
}
p{
text-indent:2em;
}
</style>
</head>
<body>
<h3>刘德华的经历</h3>
<p>
刘德华出生于香港新界,在家中排行老四,幼时随家人搬到了九龙钻石山的木屋区居住,并和姐弟一起帮助家里打理卖稀饭的生意 [23] 。1973年,刘德华随家人搬入香港蓝田邨第15座14楼 [24] 。
</p>
<p>刘德华从黄大仙天主教小学毕业后升读可立中学 [25] 。在可立中学读书期间,刘德华积极参加校内学校剧社的表演,在老师杜国威的指导下学习戏剧方面的知识。此外,他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E(中文读本A)的成绩。中六上学期后,他到香港电视广播有限公司的艺员训练班受训,从而开始了演艺之路</p>
</body>
效果:
2.字间距和单词间距
- letter-spacing 属性用于定义字间距,可以为负数,负数则会重叠在一起,默认为normal。
- word-spacing 属性用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal
<style>
p{
letter-spacing: 5px;
word-spacing: 10px;
}
</style>
<body>
<p>
刘德华出生于香港新界,在家中排行老四
</p>
<p>
my name is kevin
</p>
</body>
效果:
3.颜色半透明 和 文字阴影(Css3新增)
颜色半透明: color: rgba(r,g,b,a)
a 是alpha 透明的意思 取值范围 0~1之间 , 如:
<style>
p{
color: rgba(0,0,0,0.5);
}
</style>
<p>
刘德华出生于香港新界,在家中排行老四
</p>
效果:
文字阴影:
text-shadow: 水平位置 垂直位置 模糊程度 阴影颜色; 如:
p{
text-shadow:3px 5px 1px rgba(100,0,0,0.5);
}
效果:
4.CSS写在哪里
1.内部样式表(内嵌式)
这种就是把css写在head标签中,既上面的例子中都是使用这种方式
2.行内式(内联样式)
这种就是写在标签中,如:
<p style="color: red; font-size: 30px">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</p>
3.外部样式表(外链式)
使用link标签来连接css文件
可以把css写在一个单独的css文件中,然后通过link标签的href属性来连接该css文件
如:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="t.css">
</head>
这样的好处是结构样式分离,可以一个css文件使用整个站点。
若是简单的demo,则可以使用第一种,第二种。若是大型的网页,推荐第三种。
5.CSS背景
背景有几种属性:
- background-color:定义背景颜色
- background-image:定义背景图片
- background: 可以定义背景的一切内容,包括颜色、图片、图片位置等东西,可以定义多个
- background-repeat:定义背景是否平铺
- background-position:定义背景的位置,用空格隔开
- background-attachment : 设置或检索背景图像是随对象内容滚动还是固定的
举例如下:
div{
width: 300px;
height: 300px;
background-color: pink;
background-image: url(san.jpg);
background-repeat:no-repeat;
background-position:center top
}
效果:
其中background-position属性还可以用数值来定义如:
background-position:10px 50px;
第一个为水平方向,第二个为垂直方向,x轴为10px,y轴为50px,
也可以是混搭如下面这样:
background-position:center 50px;
水平为居中,垂直方向y轴为50px
background-attachment的参数说明:
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
说明:设置或检索背景图像是随对象内容滚动还是固定的。
如:
background-attachment:fiexd
background可以简写上面的语句:
background属性的值的书写顺序官方并没有强制标准的。为了可读性,建议如下写:
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
如:
background: pink url(san.jpg) no-repeat fixed center 50px;
这一句话等价于5句分开的
精灵图 CSS sprite:
当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。
如下:
<style>
.yy{
width: 110px;
height: 110px;
background-position: -367px -556px;
}
</style>
<body>
<div class="yy"></div>
</body>
结束语: 小公司,背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。
字体图标
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦。。 这就是字体图标(iconfont).
字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度,等.. 但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小,但携带的信息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药...
字体图标使用流程
下载字体图标:http://www.iconfont.cn/
然后把.css文件放在项目中,然后link引入:
<head>
<link rel="stylesheet" href="./iconfont.css">
</head>
<body>
<i class="iconfont icon-meinv"></i>
</body>
鼠标样式:
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
</ul>
CSS 定位:
有float和position
float就好比浮动起来的,而position则是不占位置的绝对定位。