CSS
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
CSS概述:
Cascading Style Sheets : 层叠样式表
红砖, 抹了一层水泥, 白灰
主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
1 <style> 2 选择器{ 3 属性名称:属性的值; 4 属性名称2: 属性的值2; 5 } 6 </style>
CSS选择器: 帮助我们找到我们要修饰的标签或者元素
元素选择:
1 元素的名称{ 2 属性名称:属性的值; 3 属性名称:属性的值; 4 }
1 <style> 2 span{ 3 color:blue; 4 } 5 </style>
1 <body> 2 <span>讲完这个内容大家就可以下课了</span> 3 </body>
ID选择器:
1 以#号开头 ID在整个页面中必须是唯一的s 2 #ID的名称{ 3 属性名称:属性的值; 4 属性名称:属性的值; 5 }
1 <head> 2 <meta charset="UTF-8"> 3 <title></title> 4 <style> 5 #div1{ 6 color: red; 7 } 8 </style> 9 </head>
1 <body> 2 <!--请将JAVAEE颜色改成红色--> 3 <div id="div1">JAVAEE</div> 4 </body>
类选择器:
1 以 . 开头 2 .类的名称{ 3 属性名称:属性的值; 4 属性名称:属性的值; 5 }
1 <style> 2 .shuiguo{ 3 color: yellow; 4 } 5 .shucai{ 6 color: green; 7 } 8 </style>
1 <body> 2 <!-- 3 请将水果类,改成黄色 4 蔬菜类改成绿色 5 --> 6 <div class="shuiguo">香蕉</div> 7 <div class="shucai">黄瓜</div> 8 </body>
后代选择器：
1 <style> 2 h1 > em{ 3 color: red; 4 } 5 </style>
1 <body> 2 <h1> 3 This is a 4 <em>儿子</em> <!--儿子变成了红色--> 5 <strong> 6 <em>孙子</em> 7 </strong> 8 heading 9 </h1> 10 </body>
属性选择器：
1 <style> 2 a[href][title]{ 3 color: yellow; 4 } 5 </style>
1 <body> 2 <a href="#" title="aaa">张三</a> <!--张三变成了黄色--> 3 <a href="#" >李四</a> 4 </body>
伪类选择器：
1 <style> 2 a:link {color: red} /* 未访问的链接 */ 3 a:visited {color: #00FF00} /* 已访问的链接 */ 4 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 5 a:active {color: #0000FF} /* 选定的链接 */ 6 </style>
1 <body> 2 <a href="#">黑马程序员</a> 3 </body>
/*
按照选择器搜索精确度来编写:
行内样式 > ID选择器 > 类选择器 > 元素选择器
*/
/*就近原则*/
<div class="second first ">讲完这个真的可以去吃饭啦!</div> <！--用second类选择器-->
CSS的引入方式:
外部样式: 通过link标签引入一个外部的css文件
内部样式: 直接在style标签内编写CSS代码
1 .shuiguo{ 2 color: pink; 3 } 4 .shucai{ 5 color: green; 6 }
1 <head> 2 <meta charset="UTF-8"> 3 <title></title> 4 <link rel="stylesheet" href="style1.css" /> 5 6 </head> 7 <body> 8 <div class="shuiguo">香蕉</div> 9 <div class="shucai">黄瓜</div> 10 </body>
<!--
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性:
left
right
clear属性: 清除浮动
both : 两边都不允许浮动
left: 左边不允许浮动
right : 右边不允许浮动
流式布局
-->
1 <div style="float:left;width: 200px; height: 200px; background-color: red;"></div> 2 3 <div style="clear: both;"></div> 4 5 <div style="width: 250px; height: 200px; background-color: greenyellow;"></div> 6 <div style="width: 200px; height: 200px; background-color: blue;"></div>
.logo{
float: left;
width: 33%;
/*border-width: 1px;
border-style: solid;
border-color: red;*/
height: 60px;
line-height: 60px;
/* border: 1px solid red;*/
}
.amenu{
color: white;
text-decoration: none;
height: 50px;
line-height: 50px;
}
.product{
float: left; text-align: center; width: 16%; height: 240px;
}
- 上内边距是 10px
- 右内边距和左内边距是 20px
- 下内边距是 30px
1 <div style="border:3px solid red ; width: 400px; height: 400px;" > 2 <div style="border:1px solid gray; width: 150px; height: 150px;padding: 10px 20px 30px;">肾7plus</div> 3 <div style="border:1px solid yellow; width: 150px; height: 150px;">华为P9</div> 4 5 </div>
绝对定位：
1 <div style="border: 5px solid red; width: 400px; height: 400px;position: absolute;top: 200px;left: 200px;"> 2 黑马程序员 3 </div>
