目录
一、css语法规范
选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
- ……
}
div {
font-size:12px;
color:#F00;
……
}
二、CSS选择器
CSS选择器用于选择或控制网页中的标签。
CSS提供了三种基础选择器供开发者使用。
标签选择器:html中的所有标签都可以作为选择器。
类(class)选择器:body内的所有元素都有class属性。
id选择器:body内的所有元素都有 id 属性。
1.类(class)选择器
类选择器定义: body标签中的所有标签都有class属性。(注:class名称可以重复使用。)
类选择器使用:类(class)选择器使用标志符(句点)开头后面写上类的名称。
2.id选择器
id选择器定义:body标签中的所有标签都有id属性。注:一个页面中只能使用一个id名,id名必须是唯一。
id选择器使用:id选择器使用散列符号(#)开头,后面写上id的名称。
3.CSS选择器优先级
id选择器>类选择器>标签选择器
<!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>
</head>
<style>
/* 选择器优先级 */
div{
font-size: 20px;
color: antiquewhite;
}
#demo{
font-size: 40px;
color: brown;
}
.one{
font-size: 30px;
color: aquamarine;
}
</style>
<body>
<div class="one" id="demo">学习css基本选择器</div>
</body>
</html>
三、网页中引入css样式
1.内联(行内)样式
html中的所有标签都有style属性,在style属性中直接写入css样式。
示例:
<div style=“color:red;font-size:20px;”>
这是内联样式
</div>
2.内部样式表
将html代码和css样式做简单分离,在网页头部创建style标签,在其中写入css样式。
3.外部样式表
将css样式单独写入到一个 xxx.css外部文件中。
(1)使用link标签引入外部css文件。
(2)使用@import导入外部css文件。
4.link标签引入外部样式文件
声明外部样式表:rel=“stylesheet”
引入的文件类型:type=“text/css”
引入的文件地址:href=”style.css“
<!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>
</head>
<link rel="stylesheet" href="./css/demo.css">
<body>
<p>学习css外部样式表</p>
<h1 class="test">学习css外部样式表</h1>
<h1 id="one">学习css外部样式表</h1>
<div style="color: rgb(153, 16, 128);font-size: 20px;">学习css行内样式</div>
</body>
</html>
5.CSS样式优先级
内联样式的优先级最高。
同一个标签中使用三种方式引入CSS样式,浏览器会优先执行内联样式。
内部样式表的优先级居中。
外部样式表的优先级最低。
四、字体样式
字体风格 | font-style | normal 默认值,标准文档样式 italic 斜体 |
字体粗细 | font-weight | bold 定义粗体字符 100-900 定义由细到粗的字符 |
字体大小 | font-size | 像素:px |
字体类型 | 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>
</head>
<style>
div{
font-family: "楷体";
font-size: 80px;
font-weight: 900;
font-style: italic;
/* font:italic 500 200px "楷体"; */
}
</style>
<body>
<div>学习css字体样式</div>
</body>
</html>
五、文本样式
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
六、鼠标样式
defalut 默认光标
pointer 超链接指针
wait 等待状态
help 指示可用的帮助
text 指示文档
crosshair 鼠标呈现十字状
七、背景样式
背景颜色
background-color
背景图片地址
background-image:url(图片路径)
背景重复方式
background-repeat
背景定位
background-position
背景样式简写
background:图片地址,图片重复方式,背景颜色,背景定位
八、列表样式
网页中的大部分内容都是使用列表制作的。
比如:网站导航栏,网页左侧菜单栏,网页底部信息栏,商品展示栏等。
list-style-type
(1)无序列表
disc 实体圆心(默认)
circle 空心圆
square 实体方心
none 无列表标记
(2)有序列表
1 / a / A / i / I
list-style-image
自定义列表标记为图片
属性值:url(图片路径)
list-style-position
列表标记定位
outside
inside
列表样式简写:list-style
列表标记属性
自定义列表标记图片
列表标记定位
九、CSS伪类
单击访问前 | 单击访问后 | 鼠标悬浮其上 | 单击未释放 |
link | visited | hover | active |
CSS 伪类用于向某些选择器添加特殊的效果。
伪类,顾名思义就是假的,不存在的类,不是由class=""定义的,但元素可以具有同样的一些属性,比如鼠标悬停, 那么此时就可以使用伪类,由浏览器指定它一个类,比如a:hover,效果近似于class="hover",因为可以多次使用, 所以叫伪类而不是伪ID,还有就是伪类通常是动态产生的,临时的,并非常驻属性。
十、CSS练习之美团左侧菜单栏
<!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>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
background-color:#2FAFB5;
width: 260px;
}
.one{
height: 60px;
font-size: 20px;
color: white;
text-indent: 20px;
font-weight: 400;
background-color: #28BEAC;
line-height: 60px;
}
.two{
text-indent: 35px;
line-height: 40px;
cursor: pointer;
background: url(./美团箭头.png) no-repeat 230px center;
}
.three{
text-decoration: none;
color: white;
}
.three:hover{
color: rgb(194, 0, 0);
}
.two:hover{
background: antiquewhite url(./美团箭头.png) no-repeat 230px center;
}
</style>
<body>
<div>
<h1 class="one">全部分类</h1>
<ul>
<a href="#"><li class="two"> <a href="#" class="three">美食</a> </li></a>
<li class="two"> <a href="#" class="three">外卖</a> </li>
<li class="two"> <a href="#" class="three">酒店</a> </li>
<li class="two"> <a href="#" class="three">榛果名宿</a> </li>
<li class="two"> <a href="#" class="three">猫眼电影</a> </li>
<li class="two"> <a href="#" class="three">机票/火车票</a> </li>
<li class="two"> <a href="#" class="three">休闲娱乐/KTV</a> </li>
<li class="two"> <a href="#" class="three">美食</a> </li>
<li class="two"> <a href="#" class="three">外卖</a> </li>
<li class="two"> <a href="#" class="three">酒店</a> </li>
<li class="two"> <a href="#" class="three">榛果名宿</a> </li>
<li class="two"> <a href="#" class="three">猫眼电影</a> </li>
<li class="two"> <a href="#" class="three">机票/火车票</a> </li>
<li class="two"> <a href="#" class="three">休闲娱乐/KTV</a> </li>
</ul>
</div>
</body>
</html>
效果图