引入样式方法1，行内样式：
<body>
<!--
CSS的引入方式一
行内样式:
在HTML标签,添加属性 style="属性:属性值"
作用域最小,作用当前标签
行内样式的优先级最高
-->
<h3 style="color: red;">h3标签</h3>
<h3>哈哈</h3>
</body>
引入样式方法2，表头样式：
<body>
<!--
CSS的引入方式二
内部样式:
在HTML页面里面,写CSS
标签 style,一般写在head中
属性: type="text/css"
作用是当前整个页面有效
-->
<h3>h3标签</h3>
<h3>哈哈</h3>
</body>
引入样式方法3，引入样式文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!--
CSS的引入方式三
外部样式:
CSS样式定义在另一个文件中,后缀名.css (文本文件)
在HTML页面中,引入样式表
标签 link 写在head中
属性: href="css文件路径"
type="text/css"
rel="引入的文件和当前页面是什么关系"
属性值: stylesheet
作用范围最大,哪个页面引入,哪个有效
-->
<h3>h3标签</h3>
<h3>哈哈</h3>
</body>
</html>
伪元素选择器，也就是a超链接选择器： a标签的颜色
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*text-decoration: none，不显示下划线*/
a:link{color: #333333; text-decoration: none;}/*没点过的颜色*/
a:visited{color: #333333;text-decoration: none;}/*点过的颜色*/
a:hover{color: red;text-decoration: none;}/*鼠标悬浮的颜色*/
a:active{color: green;text-decoration: none;}/*激活,按住鼠标不放的颜色*/
</style>
</head>
<body>
<!--
伪元素选择器: 超链接
四个状态: 没点过,点过,鼠标悬浮,激活
样式:固定顺序 l-v-h-a
-->
<a href="http://www.itheima.com">黑马</a>
<a href="http://www.baidu.com">百度</a>
</body>
3种基本选择器：标签元素选择器，ID选择器,class选择器，属性选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*标签元素选择器,选择器名字和标签名相同*/
h1{
color: red;
}
/*ID选择器*/
#one{
color: blue;
}
/*class选择器*/
.two{
color: yellow;
}
/*属性选择器*/
input[type="text"]{
color: red;
}
input[type="password"]{
background-color: green;
}
/*包含选择器*/
div span{
color: red;
}
</style>
</head>
<body>
<!--
CSS基本选择器:
选择器就是对HTML标签的作用
标签元素选择器
同名标签有效
ID选择器
选择器名字前面加#
标签上,添加属性id="选择器名"
class选择器,类选择器
选择器名字前面加.
标签上,添加属性class="选择器名"
CSS 中的属性选择器
选择器[属性名="属性值"]
注意:
尽量不要使用ID选择器,如果需要使用ID选择器
保证：ID的属性值具有唯一性
JavaScript: 对象 document,方法 getElementById("one")
标签变成对象,只要找到,就不找了
id属性和class谁的优先级高 ,id优先级高于class
-->
<h1>123</h1>
<h1>456</h1>
<h2 id="one">789</h2>
<h2 class="two">789</h2>
用户名<input type="text" /><br />
密的码<input type="password" />
<!--
CSS的包含选择器
选择器 选择器{}
div span div的后代子标签span
-->
<div>哈哈</div>
<div>
<span>div中的span</span>
</div>
<span>就是span</span>
</body>
CSS背景属性：
<style type="text/css">
/*
body{
background-color: red;
background-image: url(img/btn.jpg);
}*/
div{
width: 200px;
height: 200px;
background-image: url(img/btn.jpg);
background-color: blue;
}
</style>
</head>
<body>
<!--
CSS背景属性
background-color 背景色
background-image 背景图
-->
<div>我是div</div>
</body>
CSS边框属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*设置边框 粗细,颜色,样式(实线,虚线,点划线,双实线)*/
/*border-right: 5px solid yellow;——solid实线的单词*/
border: 10px solid cyan;
}
</style>
</head>
<body>
<!--
CSS边框属性
border
border-top,left,bottom,right 上，左，下，右 ，不写就是全边框
-->
<div>ssss</div>
</body>
CSS字体属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
font-family: 华文彩云;
font-size: 16px;
color: red;
line-height:50px;
}
</style>
</head>
<body>
<!--
CSS字体属性
font-size:文本大小
font-family: 字体
line-height:字体向下的偏移量，设置和容器一样的高度就是居中。
-->
<div>文字</div>
</body>
隐藏，显示，块行级，转换属性: display
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
转换属性: display
属性值: none(不显示)
属性值: block(块元素显示)
属性值: inline(行元素显示)
-->
<div style="display: none;">我是div</div>
<span style="display: block;">我是span</span>123
<br />
<div style="display: inline;">哈哈</div>456
</body>
CSS浮动属性：
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
CSS浮动属性
float: left/right （左右浮动） 两个div都浮动，就在同一行出现
清除浮动: clear：both 不会跟随上一个元素浮动
-->
<div>
<div style="float: left;">div1</div>
<div style="float: left;">div2</div>
<div style="clear: both;">div3</div>
</div>
</body>
盒子模型:处理边距的,外边距：margin,内边距：padding
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid red;
margin-top: 50px;
margin-left: 100px;
padding-top: 5px;
padding-left: 10px;
background-color:blue;
margin: 0px auto
}
</style>
</head>
<body>
<!--
盒子模型:处理边距的
width: 200px; 盒子宽度
height: 200px; 盒子高度
border: 1px solid red; 边框，实线，红色边框
margin-top: 50px; 外边距离顶部50px
margin-left: 100px; 外边距离左边100px
padding-top: 5px; 内边距离顶部5px
padding-left: 10px; 内边距离左边10px
background-color:blue; 设置盒子背景色为蓝色
margin: 0px auto; 设置上下间距为0，auto就是盒子居中
-->
<div>我是div</div>
</body>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
