概述
为什么使用css
- 避免重复
- 更容易维护
- 为不同的目的，使用不同的样式而内容相同
CSS的基础语法
选择器{
声明1；
声明2；
...
}
Style标签
- Style 标签在HTML文档中的位置 ， 在<head 和 </head之间
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: rgba(224, 183, 134, 0.69);
}
h2{
font-size: 200px;
}
</style>
</head>
<body>
<h1>你是谁啊</h1>
<h2>我是你爸爸</h2>
</body>
</html>
引入CSS的方式
- 行内样式
使用style属性引入CSS样式
秦 - 内部样式表
CSS代码写在<head的<style标签中 - 外部样式表
链接式
导入式
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式表
需要使用style标签
格式 :
选择器 {
属性 : 属性值
}
-->
<style>
a{
font-size: 50px;
}
</style>
</head>
<body>
<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello,css</p>
<p>Hello,css</p>
<hr/>
<a href="">Goodbye,world</a>
</body>
</html>
css优先级
- 行内样式 > 内部样式表 > 外部样式表
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="resources/css/Style.css">
<style>
span{
color: blue;
font-family: 楷体;
}
</style>
</head>
<body>
<span style="color: green">
IT梦想
</span>
</body>
</html>
css选择器
-
标签选择器
uHTML标签作为标签选择器的名称
<h1…<h6、<p、<img/ -
类选择器
类选择器
<标签名 class= “类名称”>标签内容</标签名>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器
思考 : 需要一类 ? 类在标签中定义, 使用class属性
然后使用类选择器选择到指定的标签元素
.类名称{
属性:属性值
}
*/
.a{
font-family: 宋体;
}
.b{
font-style: italic;
}
</style>
</head>
<body>
<p class="a">来西部开源</p>
<a href="" class="a">成就IT梦想</a>
<div class="a">好好学习,天天向上</div>
<span class="b">cool</span>
<br>
<qinjiang class="b">你好啊</qinjiang>
</body>
</html>
- ID 选择器
案例：
<标签名 id = “id名称”>标签内容</标签名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id属性全局唯一 , 不能同名*/
/*ID选择器
需要一个iD --> 在标签中定义ID
格式:
#id名字{
}
*/
#goods{
font-size: 200px;
}
#aaa{
color: yellow;
}
</style>
</head>
<body>
<p class="a" id="aaa">1</p>
<a href="" class="a">2</a>
<div class="a">3</div>
<span class="a" id="goods">4</span>
</body>
</html>
总结
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
基本选择器的优先级
-
ID选择器>类选择器>标签选择器
-
基本选择器不遵循 “ 就近原则 "
css常用样式
- 文字样式
| color | 颜色 |
|---|---|
| font-size | 字体大小 |
| font-weight | 文字粗细 |
| font-family | 字体集 |
| font | 在一个声明中设置字体所有属性 |
- 文本样式
| color | 颜色 |
|---|---|
| text- align | 文字对齐 |
| text- decoration（none） | 文字装饰 |
| text-indent | 首行缩进 |
| line-height | 行高 |
案例：
#author{
font-family: 楷体;
}
#time{
font-style: italic;
}
/* text-indent文本首行缩进 */
.sj{
text-indent: 2em;
}
h1{
text-shadow: aqua -1px 1px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="resources/css/Style2.css">
</head>
<body>
<!--
px ->像素
em ->字符
-->
<h1>公司简介</h1>
<p>发布人: <span id="author">阿里</span> 时间: <span id="time">20119-01-01</span></p>
<p>阿里技术中心是一家集教育培训、人才服务、服务外包、企业定制为一体的综合性软件技术服务机构。</p>
<p class="sj">公司成立十年以来，全心全意致力于“Linux&C、C++开发工程师”、“Linux系统运维工程师及运维研发工程师”、“Web前端开发工程师”、“Java开发工程师”的培训，以及C++开发、云计算、虚拟化、python自动化运维等综合性企业级职业技能培训。公司持续深耕主校区，并在各个大学开设分校区与咨询网点，借助高校区位优势，专注于Linux技术的培训，为大学毕业生开辟更为广泛的就业途径。
</p>
<p class="sj">公司拥有一支专业进取的教学师资团队，具有丰富的行业经验，参加过众多政府重大电子信息工程项目的研发。公司还具备体系完整并不断更新的独家课程体系和配套的题库考试系统，为学员学习保驾护航。经过十年的教育培训历程，公司已为腾讯、阿里、百度、京东、搜狐、新浪等一线互联网企业输送技术精英2000余人，得到用人单位和结业学员的一致好评。
</p>
</body>
</html>
网页背景
- 背景颜色
background-color - 背景图片
background-image - 背景定位
background-position属性 - 背景重复方式
background-repeat - 简写
background
background:#C00 url(…/image/kuangshen.jpg) 205px 10px no-repeat;
案例：
body{
background-image: url("../../resources/image/1.png");
background-repeat: no-repeat;
}
1
2
3
4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="resources/css/Style5.css">
</head>
<body>
</body>
</html>
扫一扫
4936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
