1、CSS概述
css全称：层叠样式表
用来美化页面
2、CSS基础语法
1.css书写规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
<标签 style="样式名:样式值;样式名:样式值;">
-->
<div style="color: red;border: 1px solid blue;">
我是div
</div>
</body>
</html>
小结：
1.样式名和样式值之间以冒号隔开
2.每组样式之间以分号隔开
2.HTML引入CSS
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/**
内部样式
*/
span{
font-size: 50px; //文本的大小
}
</style>
<!-- 引入外部样式-->
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<!-- 行内样式，设置颜色 -->
<span style="color: red;">黑马程序员</span>
</body>
</html>
css文件：
span {
font-family: 楷体; //字体
}
小结：
html引入css有3种方式：
1.行内样式 <标签名 style="css样式名：样式值;">，一般测试时使用
2.内部样式，<style>标签引入，常用
3.外部css样式，<link>标签引入，常用。
思考？如果一个标签同时引入了3种样式，3种样式都有颜色设置一项，问：采用哪一种颜色？
优先级（就近原则） 行内样式>内部样式>外部样式
3.基本选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-基本选择器</title>
<style>
/*
#三大基本选择器
1. id选择器
a. 每个标签都有id属性(属性值当前html唯一)
b. 语法: #id值
#myid : 定位id=myid 的标签
2. class选择器
a. 每个标签都有class属性(class属性允许重复)
b. 语法: .class值
.myclass : 定位class=myclass的一组标签
3. 标签选择器
a. 语法: 标签名
b. 选中标签名为xxx的一组标签
*/
#myid{
color : red;
}
.yourclass{
font-size: 30px;
color : pink;
}
.myclass{
color : #00ff00;
}
span{
color : blue;
}
</style>
</head>
<body>
<span id="myid" class="myclass">span1</span> <br>
<span class="myclass yourclass">span2</span> <br>
<span class="myclass">span3</span> <br>
<span>span4</span> <br>
<span>span5</span> <br>
<span>span6</span> <br>
</body>
</html>
4.扩展选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
扩展选择器： 这是基本选择器的组合
1.并集选择器 ： 解决了多个选择器样式一致时的代码冗余
选择器1，选择器2 {
css样式
}
2. 后代选择器 : 选择器1下面的所有满足选择器2的子标签。
选择器1 选择器2 {
css样式
}
3. 父子选择器 : 选择器1下面的所有满足选择器2的儿子辈标签
选择器1>选择器2 {
css样式
}
4.属性选择器 : 针对满足选择器的标签再次进行属性条件的过滤
选择器[属性名=属性值][...]
*/
/**
需求1：所有div和所有的span同样的样式
*/
/* div,span {
color: red;
}
*/
/*
需求2： 所有div内部(儿子辈和孙子辈)的span标签
*/
/*div span {
color: red;
}*/
/*
需求3： 所有div内部(儿子辈)的span标签
*/
div>span {
color: red;
}
/*
所有的输入框边框是红色
*/
input[type="text"] {
border:1px solid red;
}
</style>
</head>
<body>
<div>
<p>
<span>我是span4</span>
</p>
我是div1
<span>
我是span3
</span>
</div>
<div>
我是div2
</div>
<span>
我是span1
</span>
<span>
我是span2
</span>
<br>
<input type="text">
<input type="text">
<input type="text">
<input type="button" value="按钮">
<input type="submit">
<input type="password">
</body>
</html>
小结：
1.并集选择器 选择器1，选择器2... 解决多个选择器样式冗余问题
2.后代选择器 选择器1 选择器2 选择器1 后面的所有满足选择器2的后代
3.父子选择器 选择器1>选择器2 选择器1 后面的所有满足选择器2的儿子辈标签
4.属性选择器 选择器[属性名=属性值][属性名=属性值]
3、CSS常用样式
1.字体和文本属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-字体和文本属性</title>
<style>
/*
渲染需求
1.所有文字绿色
2.所有文字大小20px
3.所有行高40px //todo
4.所有字体加粗
5.所有字体楷体
6.第一句文字倾斜
7.第一句隐藏下划线
*/
div{
color : green;
font-size: 20px;
font-weight: bold;
font-family: 楷体;
line-height: 40px;
}
a{
font-style: italic;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p>
<a href="http://www.baidu.com"> 学习的误区：</a><br/>
眼睛：看了一遍记住了<br/>
耳朵：听了一遍明白了<br/>
脑子：想了一遍搞懂了<br/>
手：你们会个屁！^_^ <br>
</p>
</div>
</body>
</html>
小结：
color ：文本颜色
font-size ：文字大小
line-height ：文本的行高
font-weight ：文本的粗细
font-family ：文本的字体
font-style ：文本的类型，比如 斜体
text-decoration ：文本的线条形状
2.背景属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-背景属性</title>
<style>
/*body{
background-color: #3b1f1f;
background-image: url("../img/girl.jpg");
background-repeat: no-repeat;
}*/
body{
background: #3b1f1f url("../img/girl.jpg") no-repeat;
}
</style>
</head>
<body>
<h1 style="color: white">我是标题</h1>
<!--
背景属性
background-color：背景色
background-image：背景图片
取值：url('图片地址')
background-repeat：平铺方式
取值：repeat（水平和垂直）、repeat-x（水平）、repeat-y（垂直）、no-repeat（不平铺）
简写方式
background:color image repeat;
-->
</body>
</html>
3.显示属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-显示属性</title>
<style>
/*
display : 展示
1. block : 块级 (自动换行)
2. inline : 本行 (不会自动换行)
3. none : 隐藏
*/
input{
display: block;
}
div{
display: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<input type="text">
<input type="password">
<input type="button" value="登录">
<div>块级标签div1</div>
<div>块级标签div2</div>
<div>块级标签div3</div>
<ul>
<li>电器</li>
<li>果蔬</li>
<li>手机</li>
</ul>
</body>
</html>
小结：
display属性用于块级元素和行级元素的转换，也用于标签的影藏和显示。
取值：
1. block : 块级 (自动换行)
2. inline : 本行 (不会自动换行)
3. none : 隐藏
实际企业开发：
block常用于行级元素的自动换行，例如表单标签
inline长用于块级元素显示在一行，例如ul标签，用于菜单。
none一般就是涉及到动画效果的影藏，例如广告
4.盒子模式
图解：
padding: 内边距，标签和其内容的距离
margin: 外边距：当前标签和其他标签之间的距离。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-盒子模型</title>
<style>
/*
盒子模型: 在html中,每个标签都可以看成一个盒子
0. 准备: 在google浏览器中快捷键F12 (开发者工具)
选中elements标签
1. 盒子5要素:
border : 边框
width + height : 宽高(内容)
padding : 内间距(边框到内容的距离)
margin : 外间距(边框到另一个标签的距离)
2. 两种盒子类型
1. 标准盒子: box-sizing: content-box; (默认)
width=content的宽度
2. 怪异盒子: box-sizing: border-box;
width=盒子的宽度=border+padding+content宽度
*/
div{
border: 1px solid green;
width: 100px;
height: 100px;
padding: 10px;
margin: 50px 60px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
内容
</div>
</body>
</html>
小结：
盒子模型是用来方便网页元素的布局的
盒子模型：
padding: 内边距
margin: 外边距
怪异盒子：padding不会撑大盒子。
标准盒子：padding会撑大盒子
```
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
