javaweb学习笔记 css篇

9.CSS技术
9.1 css的概念
css是“层叠样式表单”是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言
9.2 css的语法规则
选择器：浏览器根据“选择器”决定受css样式影响的html元素（标签）
属性：是你要改变的样式名，并且每个属性都有一个值，属性和值都被冒号分开，并由花括号包围，这样就形成了一个完整的样式声明，例如：p{color：blue}
多个声明：如果要定义不止一个声明，则需要用括号将每个声明分开，虽然最后一条声明的最后可以不加分号，（但尽量每条声明的末尾都加上分号）
例如：

p{
color:red;
font-size:30xp;
}

注：每一行都会写一个属性
CSS注释/注释内容/
9.3css与html的结合方式
9.3.1第一种
在标签的style属性上设置”key：value value“，修改标签样式

div标签1

问题：这种方式的缺点？ 1.如果标签多了，样式多了，代码量会非常庞大 2.可读性非常差 3.css代码没什么复用性可言

9.3.2第二种：
在head标签中，使用style标签来定义自己需要的css样式
格式如下：

xxx{
key：value value; 
}

<style type="text/css">
    div{
        border: 1px solid yellow;
        color: blue;
        font-size: 50px;
    }
    span{
        border: 5px dashed red;
        color: green;
        font-size: 25px;
    }
</style>

问题：这种方式的缺点：
1.只能在同一界面内复用代码 不能在多个界面复用css代码
2.维护起来不方便，实际的项目中会出现成千上万个界面，要到每个界面中去上修改，工作量太大了
9.3.3第三种
把css代码写成一个单独的css文件，再通过link标签引入即可复用。

<!--link标签用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href=".idea/1.css">

9.4css选择器
9.4.1标签名选择器
标签名选择器的格式是
标签名{
属性：值；
}

标签名选择器可以决定哪些标签被动的使用这样的样式

<style type="text/css">
    div{
        border: 1px solid yellow;
        color: blue;
        font-size: 50px;
    }
    span{
        border: 5px dashed red;
        color: green;
        font-size: 25px;
    }
</style>

9.4.2 id选择器
id选择器的格式是：

#id属性值{
属性：值；
}

id选择器可以让我们通过id属性选择性的使用这个样式

<style type="text/css">
    #id001 {

        border: 1px solid yellow;
        color: blue;
        font-size: 50px;
    }
   #id002 {
       border: 1px solid red;
       color: blue;
       font-size: 50px;
   }
</style>


<div id="id001">div标签1</div>
<div id="id002">div标签2</div>

9.4.3 class选择器（类选择器）
class类型选择器的格式是：

.class属性值{
属性：值；
}

class类型选择器，可以通过class属性有效的选择性地使用这个样式

<style type="text/css">
 .class01{
     color: red;
     border: 2px solid yellow;
     font-size: 50px;
 }
 .class02{
     color: green;
     border: 2px solid blue;
     font-size: 30px;
 }
</style>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>

9.4.4 组合选择器
组合选择器的格式是：

选择器1，选择器2，选择器n{
属性：值；
}

组合选择器可以让多个选择器共用同一个css代码

<style type="text/css">
 .class01,#001{
     color: red;
     border: 2px solid yellow;
     font-size: 50px;
 }

</style>
<div class="class01">div标签1</div>
<div id="001">div标签2</div>

9.5常用样式

 <style type="text/css">
 div{
     color: red; /* 颜色*/
     border: 2px solid yellow;/*边框*/
     width: 300px; /*宽度*/
     height: 300px;/*高度*/
     background-color: blue;/*背景颜色*/
     font-size: 30px;/*字体大小*/
     margin-left:auto ;/* div居中*/
     margin-right:auto;
     text-align: center;/*文字居中*/
 }
 a{
     text-decoration: none;/*超链接去除下划线*/
 }
 table{
     border: 2px solid yellow;
     border-collapse: collapse;/*将列表合并*/
 }
 td{
     border: 2px solid red;
 }
 ul
 {
     list-style: none; /*列表去除修饰*/
 }
</style>