CSS概念:
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
语法:
选择器{一条或者多条声明}
如:
p {
color: red;
font-size: 12px;
}
其中p为标签选择器,color:red和font-size:12px均为声明。
属性和属性之间以";"分隔;
属性和属性值之间以“:”分隔;
CSS基础选择器:
<1>标签选择器
标签名 { 声明}
p {color: red}
标签选择器就是html代码中的标签。
之前的html、body、h系列的标签、p、div、img等我们都可以使用标签选择器来设置对应的css样式属性。
使用标签选择器后,整个该类标签即被选择,为同类型标签设置样式,但缺点在于无法差异化选择。
<2>类选择器
<style>
.red {color: red} 自定义类名
</style>
<div class="red">文本</div>
类选择器可以单独选择一个或者多个标签,可以实现差异化设置。
任何的标签元素都可以添加类(class),但是不同的是类是可以重复,有“归类”的概念,并且同一个标签中可以携带多个类,用空格隔开。
需要注意的是:
1、英文圆点开头
2、其中类选择器名称可以任意起名(最好不要起中文,也不要用纯数字来进行命名);
3.一个标签可以指定多个类名,但最好有公共类的存在。
调用多类名时,类名间用空格隔开;
<3>id选择器
在网页中所有的标签都可以设置id,并且id不能重复(即id名称必须唯一)。为标有特定id的HTML元素指定特定样式。
语法:
#ID选择器名称{
声明
}
与类选择器的区别:
1.id选择器样式通过#定义,结构用id调用。
2.id选择器只能调用一次,其他元素无法使用。
<4>通配符选择器
通配符选择器(*)选择页面上的所有的 HTML 元素。
* { 声明}
用“ * ”定义,表示所选页面所有元素[不需要调用];
css复合选择器:
<1>后代选择器【包含选择器】
可以选择父元素里的子元素进行改变样式。
语法:
/*后代选择器可以使用具有父子关系的元素进行选择(最少两个),每个子元素可以用标签方式表达,也可以用类名,id,伪类等表达*/
element1 element2 element3{
样式;
}
element2为element1的后代,element3为element2的后代;
<2>子选择器
选择作为某元素最近的一级子元素(仅选择1个)。
语法:
元素1 >元素2
{样式}
<3>并集选择器
选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
语法:
元素1 ,元素2
{ 样式 }
任何形式基础选择器都可以作为元素;
元素之间以逗号分隔,最后一个元素后面不需要加逗号;
<4>伪类选择器
用于向某些选择器添加特殊的效果。书写最大的特点是用冒号表示。
1.链接伪类选择器:
a: link
a:link | 选择所有未被访问的链接 |
a:visited | 选择所有已被访问的链接 |
a:hover | 选择鼠标指针位于其上的链接 |
a:active | 选择活动链接(鼠标按下而未松开时的链接) |
一般开发中较为常用的是hover
书写时注意事项:
·按照LVHA(link visited hover active)顺序书写,不能更改顺序,如果更改顺序,可能会使原来的效果不存在。
·链接标签(a)在浏览器中有默认样式(蓝色,有下划线),所以需要单独给a指定样式。
2.focus伪类选择器(input类的表单元素)
如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input:focus {
background-color: gainsboro;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
将获得光标的元素的背景改为灰色。
鼠标位于第三个上,所以背景变为灰色。
字体属性
1.使用font-family定义文本的字体系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-family: "宋体";
}
div {
font-family: "Microsoft YaHei";
}
</style>
</head>
<body>
<p>这是宋体</p>
<div>这是微软雅黑</div>
</body>
</html>
Tips:
若有多个字体,则用“,”分隔,系统将按顺序选择存在于浏览器中的字体。
多个单词组成的字体,最好加上引号。【单双均可】
尽量使用系统默认字体,保证用户浏览器可以正常使用。
用类选择器直接给body指定字体,页面均会以此字体显示。
2.使用font-size定义字体大小
如
p {
font-size: 20px;
}
谷歌默认字体是16px,不同的浏览器默认字体大小不一样,所以最好定义字体大小;
给body定义字体大小后,将除标签元素外全部应用该大小。
3.使用font-weight定义字体粗细
normal | 默认。正常字体。值为400 |
bold | 粗体。与<b>作用一致。值为700 |
bolder | 特粗体 |
lighter | 细体 |
4.使用font-style定义字体风格
italic | 斜体 |
normal | 默认 |
5.字体复合属性(合起来的写法)
div {
font: font-style font-weight font-size/line-height font-family
}
其中font-size和font-family不可省略;