JavaWeb基础_html&CSS

1.DIV相关技术

Div是一个HTML标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须和CSS结合起来使用，主要用于页面的布局。
Span同样也是一个HTML标签，它是一个内联元素(显示一行)。它单独使用也没有任何的意义，必须和CSS结合使用，它主要用于对括起来的内容进行修饰作用。

2.什么是CSS？

CSS指的是层叠样式表
样式定义如何去显示HTML元素
样式通常储存在样式表中
多个样式可以层叠为一

3.HTML和CSS的关系

HTML：整个网站的骨架
CSS：对整个网络骨架的内容进行的美化（修饰作用）

4.关于CSS的三种引入方式

行内引入：在<body>标签内直接进行<div>标签的书写
<div style="color: red;font-size: 30px;">
　　　　　　你若安好便是晴天
        </div>
内部引入方式：在<head>标签里面加入如下代码
　　<style type="text/css">
　　div{
　　　　color: greenyellow;
　　　　font-size: 30px;
　　}
　　</style>

在接下来的<body>标签里面直接添加如下代码即可：

　　<div>你若安好便是晴天</div>

外部引入：先在一个外部文件夹，如CSS文件夹里面进行*.css的书写，如下代码：

　　div{
　　　　　　color: greenyellow;
　　　　　　font-size: 30px;
　　　　}

之后在**.html文件中直接进行外部CSS文件的引入

　　<link rel="stylesheet" href="css/Out.css" />

在接下来的<body>标签里面直接添加如下代码即可：

　　<div>你若安好便是晴天</div>

5.CSS 的语法和规范　

选择器{

属性名1:属性值1；

属性名2:属性值2；

属性名3:属性值3；//注意分号和冒号

}

6.CSS的三种基本选择器（元素选择器、类选择器、id选择器）

元素选择器：用来实现整体的设计，如下：在<body>标签内部写<div>标签设计即可

<div>你若安好便是晴天11</div>
        <div >你若安好便是晴天22</div>
        <div>你若安好便是晴天33</div>
        <div>你若安好便是晴天44</div>
        <div>你若安好便是晴天55</div>
        <div>你若安好便是晴天66</div>

　　在<head>标签里面写选择器内容

<style type="text/css">
            div{
                color: greenyellow;
                font-size: 30px;
            }
        </style>

类选择器：用来实现局部的设计，在<body>标签里面的<div>加上class属性

<div>你若安好便是晴天11</div>
        <div class="div2">你若安好便是晴天22</div>
        <div>你若安好便是晴天33</div>
        <div class="div2">你若安好便是晴天44</div>
        <div>你若安好便是晴天55</div>
        <div>你若安好便是晴天66</div>
在<head>标签里面的类选择器中如下设置即可：注意div2前面的引入有个小数点

<style type="text/css">
            .div2{
                color: greenyellow;
                font-size: 30px;
            }
        </style>

id选择器：用来实现唯一的设计，在<body>标签里面的<div>加上id属性

<div>你若安好便是晴天11</div>
        <div class="div2">你若安好便是晴天22</div>
        <div>你若安好便是晴天33</div>
        <div class="div2">你若安好便是晴天44</div>
        <div id="div5">你若安好便是晴天55</div>
        <div>你若安好便是晴天66</div>
在<head>标签里面的id选择器中如下设置即可：注意div5前面的引入有个#号



<style type="text/css">
            #div5{
                color: greenyellow;
                font-size: 30px;
            }
        </style>

7.其他选择器（层级选择器，属性选择器）

层级选择器：

在body标签里面添加如下代码：
<div>
            <p>你若安好便是晴天66</p>
        </div>
在style标签里面添加如下代码：

<style type="text/css">
　　div p{
　　color: greenyellow;
　　font-size: 30px;
　　}
　　</style>

属性选择器：

在body标签里面添加如下代码：

用户名：<input type="text" name="username"/><br />
        密码：<input type="password" name="password"/>
        </div>
在style标签里面添加如下代码：
　　<style>
　　input[type='text']{
　　background-color: red;
　　}
　　input[type='password']{
　　background-color: blue;
　　}
　　</style>

猜你喜欢