CSS

HTML的块标签:

div标签: 默认占一行,自动换行

span标签: 内容显示在同一行

CSS概述:

Cascading Style Sheets : 层叠样式表

红砖, 抹了一层水泥, 白灰

主要用作用:

用来美化我们的HTML页面的

HTML 决定网页的骨架 ,CSS 化妆

将页面的HTML和美化进行分离

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代码

行内样式: 直接在标签中添加一个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>

1         <div style="float:left; 200px; height: 200px; background-color: red;"></div>
2         
3         <div style="clear: both;"></div>
4         
5         <div style=" 250px; height: 200px; background-color: greenyellow;"></div>
6         <div style=" 200px; height: 200px; background-color: blue;"></div>

            .logo{
                float: left;
                 33%;
                /*border- 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;  16%; height: 240px;
            }

上内边距是 10px
右内边距和左内边距是 20px
下内边距是 30px

1         <div style="border:3px solid red ;  400px; height: 400px;" >
2              <div style="border:1px solid gray;  150px; height: 150px;padding: 10px 20px 30px;">肾7plus</div>
3              <div style="border:1px solid yellow;  150px; height: 150px;">华为P9</div>
4              
5         </div>

绝对定位：

1         <div style="border: 5px solid red;  400px; height: 400px;position: absolute;top: 200px;left: 200px;">
2             黑马程序员
3         </div>