#div1{
background: #FF0000;
width: auto;
height: 6.25rem;
}
/*标签选择器 */
input{
border: #FF0000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中嵌入css演示的第一种方式：内联定义</title>
</head>
<style type="text/css">
/*
这是css的注释
*/
/* 这类应该 这样选择样式
选择器{
样式名：样式值；
样式名：样式值；
样式名：样式值；
}
css中常见的选择器：最常用的三种选择器。
包括：标签选择器，id选择器 class选择器。
*/
/* 标签选择器
标签名 {}
*/
.student{
font-size:12px;
color:#FF0000;
}
div{
/* 作用的范围比较广，不加限制就是所有的div
要想限制的话，就要加选择器。
*/
width: 100px;
height:100px;
}
/* id选择器
使用格式：#id {}
*/
#userName{
width:200px;
height: 200px;
}
<input type = "text" id = "userName">
/* 类选择器 ：作用于当前网页中某一类的标签*/
<!-- class属性是任何一个标签都有的，class相同的，都可以看作同一类标签 -->
</style>
<!-- style 和body一定要区分开
body中写内容，
style中写具体的格式
-->
<body>
<span class = "student">
文本内容
</span>
<p class = "student">
1——1
</p>
<!-- 内联定义方式：
<标签 style = "样式名： 样式值";></标签>
style :风格 ，样式
任何一个HTML都可以指定style属性
-->
<div id="div" style = "width :300px
height :300px
">
</div>
<!-- html 嵌入css的第二种方式： 定义内部演示块对象
head 标签中是用style标签，定义样式块对象
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中嵌入css样式的第三种方式：链入外部样式表文件</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
<!-- 上面的语句就是链接外部表文件 -->
</head>
<body>
<!--引入外部独立的css样式表文件 -->
<div id="div1">
我很好
</div>
提交<input type="text" class = "input" />
</body>
</html>
<!-- 最高优先级是标签选择器：其次是类选择器，最后是标签选择器 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
background-color: red;
border: solid 1px black;
width:100px;
height: 300px;
/* position */
position:absolute
top:300px;
left:300px;
}
/* 光标变小手 */
#baidu{
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">
<span id="baidu">
baidu
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内边距外边距</title>
<style type="text/css">
#div1{
width:300px;
height:300px;
background: #FF0000;
border: solid 1px red;
}
#div2{
width:100px;
height:100px;
background: black;
border: solid 1px red;
margin-top: 10px;
/* 在顶部的补丁 */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* hover是用来设置鼠标的悬停效果的
hover的冒号的两边都是不允许有空格的
*/
p:hover{
color:red;
font-size:100px;
}
</style>
</head>
<body>
<p>我是一个段落</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本装饰</title>
<style type="text/css">
#baidu{
text-decoration: underline;
/* */
}
#bai{
text-decoration: none;
}
</style>
</head>
<body>
<div id="baidu">
baidu
</div>
<a id = "bai" href="http://www.baidu.com">百度</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏</title>
<style type="text/css">
#cities{
display:none;
}
ul{
list-style-type: none;
/* 设置前面小圆点的样式 */
}
</style>
</head>
<body>
<!-- 隐藏-->
<ul>
<li>中国
<ul id = "cities">
<li>北京</li>
<li>天津</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
|