HTML/CSS 学习笔记（二）

来源：互联网发布：现代德军淘宝编辑：程序博客网时间：2024/06/05 17:19

CSS

层叠样式表
** 层叠：一层一层
** 样式表：很多的属性和属性值
CSS将网页内容和显示样式进行了分离，提高了显示功能
CSS的使用
不能单独使用，需要结合html（四种结合方式）
（1）在每个html标签上面都有一个属性style，把css和html结合在一起。属性和属性值之间用冒号，每一个属性结束用分号

<html> <head>  <title>css和html的结合方式一</title> </head> <body>    <div style='background-color:red;color:green;'>css和html的结合方式一</div> </body></html>

（2）使用html的一个标签实现 <style>标签，写在head里面<style type=”text/css”>css代码</style>
div加大括号指明对哪一个部分进行操作

<html> <head>  <title>css和html的结合方式二</title>  <style type='text/css'>    div{        background-color:blue;        color:red;    }  </style> </head> <body>  <div>css和html的结合方式二</div> </body></html>

（3）在style标签里面使用语句
− 第一步创建一个css文件，注释方式跟Java相同

/*    div 的样式*/div {    background-color:yellow;    color:black;}

然后导入这个css文件，@import url（css文件的路径）;

<html> <head>  <title>css和html的结合方式三</title>  <style type='text/css'>    @import url(div.css);  </style> </head> <body>  <div>css和html的结合方式三</div> </body></html>

第三种方式对于代码的可维护性来说更方便一点，只需要修改相关的css文件
（4）使用头标签link，引入一个外部css文件
− 第一步创建一个css文件

/*    div 的样式*/div {    background-color:yellow;    color:black;}

− <link rel=”stylesheet” type=”text/css” href=”css文件的路径” />这个语句不需要背，用的时候直接复制。rel代表引入的样式表

<html> <head>  <title>css和html的结合方式四</title>  <link rel='stylesheet' type='text/css' href='div.css'/> </head> <body>    <div>css和html的结合方式四</div> </body></html>

**** 第三种结合方式，缺点：在某些浏览器下不起作用。所以一般使用第四种方式。重点掌握1，2，4的方式，第三种作为了解使用

**** 样式优先级（一般情况）：由上到下，由外到内，优先级由低到高。优先级代表以谁的样式为准。由于解析顺序是从上到下一行一行解析的，后解析到的样式优先级就高。

**** 格式选择器名称{属性名：属性值；属性名：属性值；……}每个属性名结束用分号表示

<html> <head>  <title>css和html的结合方式对比</title>  <style type='text/css'>    div{    background-color:gray;    color:white;    }  </style> </head> <body>    <div style='background-color:red;color:green;'>css和html的结合方式一</div>    <div>css和html的结合方式二</div> </body></html>

注意看效果图
这里写图片描述

CSS的基本选择器（三种）

要对哪个标签里面的数据进行操作
（1）使用标签作为选择器的名称

<html> <head>  <title>css的基本选择器1</title>  <style type='text/css'>      div{ background-color:red;}      p{ background-color:green;}  </style> </head> <body>  <div>123</div>  <p>456</p> </body></html>

（2）类（class）选择器
每个html标签都有一个属性class

<html> <head>  <title>css的基本选择器2</title>  <style type='text/css'>    /*    div.haha{        background-color:green;    }    div.hehe{        background-color:yellow;    }    */    .haha{        background-color:green;        }  </style> </head> <body>  <div class='haha'>123</div>  <div class='hehe'>456</div>  <p class='haha'>789</p> </body></html>

（3）id选择器
每个html标签上有一个属性id，写法就是#加上id的值

<html> <head>  <title>css的基本选择器3</title>  <style type='text/css'>    /*div#haha{        background-color:green;    }    p#haha{        background-color:green;    }*/    #haha{        background-color:green;    }  </style> </head> <body>  <div id='haha'>123</div>  <p id='haha'>456</p> </body></html>

这三个选择器用的都比较多

**** 优先级：style > id选择器 > class选择器 > 标签选择器（div{ }）

<html> <head>  <title>css基本选择器的优先级</title>  <style type='text/css'>    .haha1{        background-color:green;    }    div{        background-color:red;    }  </style> </head> <body>  <div class='haha1'>123</div>  <div>456</div> </body></html>

先加载class选择器，再加载标签选择器，按照以往的思想背景颜色应该为红色。所以class选择器大于标签选择器。下面为结果展示：

这里写图片描述

现在在上述标签中加入id：id选择器的大于class选择器优先级。将id选择器放在最上面，在结果中依然可以看到id上的颜色

<html> <head>  <title>css基本选择器的优先级</title>  <style type='text/css'>    #hehe1{        background-color:orange;    }    .haha1{        background-color:green;    }    div{        background-color:red;    }  </style> </head> <body>  <div class='haha1' id='hehe1'>123</div>  <div>456</div> </body></html>

这里写图片描述

在div中加入style属性：可以看到style选择器的优先级最高（显示为灰色）

<html> <head>  <title>css基本选择器的优先级</title>  <style type='text/css'>    #hehe1{        background-color:orange;    }    .haha1{        background-color:green;    }    div{        background-color:red;    }  </style> </head> <body>  <div class='haha1' id='hehe1' style='background-color:gray;'>123</div>  <div>456</div> </body></html>

这里写图片描述

CSS的扩展选择器（三种）

（1）关联选择器
用于设置嵌套标签的样式
需求：在div标签内部嵌套p标签，设置内部p标签的样式。
写法形式：外层+空格+内层

<html> <head>  <title>CSS的扩展选择器1</title>  <style type='text/css'>    div p{        background-color:orange;    }    p{        background-color:gray;    }  </style> </head> <body>  <div><p>CSS的扩展选择器</p></div>  <p>WWWWWWWWWWWW</p> </body></html>

样式结果：

这里写图片描述

（2）组合选择器
把不同的标签设置成相同的样式
需求：分别有div标签和p标签，把两个标签设置成相同的样式。
写法：两个标签中间加逗号隔开

<html> <head>  <title>CSS的扩展选择器2</title>  <style type='text/css'>    div,p{        background-color:orange;    }  </style> </head> <body>  <div>123</div>  <p>456</p> </body></html>

样式结果：

这里写图片描述

（3）伪元素选择器
CSS里面提供了一些定义好的样式，可以直接那过来使用。
** 比如超链接：超链接的状态（4种）：
- 原始状态（什么都不做的时候鼠标没有变化）； :link
- 鼠标悬停在超链接时候变化的状态； :hover
- 点击超链接不动时候的状态； :active
- 点击后页面刷新的状态； :visited

写法：冒号+元素

<html> <head>  <title>CSS的扩展选择器3</title>  <style type='text/css'>    /*原始状态*/    a:link{        background-color:red;    }    /*悬停状态*/    a:hover{        background-color:green;    }    /*点击状态*/    a:active{        background-color:blue;    }    /*点击后状态*/    a:visited{        background-color:gray;    }  </style> </head> <body>  <a href='http://www.baidu.com' target='_blank'>CSS的扩展选择器3-超链接1</a> </body></html>

CSS的盒子模型

比如有一个表格，如果想要改变表格中相应位置的东西，那么就要改代码。所以现在使用div+css的形式，只要改变样式就可以随意移动里面的位置。将数据放在盒子里面，通过移动盒子来改变位置

这里写图片描述

在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框 border（设置盒子基本属性：粗细、边样式、颜色）

这里写图片描述

统一设置：

<html> <head>  <title>css的盒子模型1</title>  <style type='text/css'>    div{        width:200px;        height:100px;        /*border有三个值设置，粗细，样式，颜色。值之间用空格分开（统一设置）*/        border:2px solid blue;    }  </style> </head> <body>  <div id='div11'>AAAAAA</div>  <div id='div12'>BBBBBB</div>  <div id='div13'>CCCCCC</div> </body></html>

样式效果：

这里写图片描述

分别设置时：

<html> <head>  <title>css的盒子模型1</title>  <style type='text/css'>    div{        width:200px;        height:100px;        /*border有三个值设置，值之间用空格分开（统一设置）*/        border:2px solid blue;    }    #div12{        /*对边分别设置，同样是设置三个值*/        border-right:2px dashed yellow;    }  </style> </head> <body>  <div id='div11'>AAAAAA</div>  <div id='div12'>BBBBBB</div>  <div id='div13'>CCCCCC</div> </body></html>

样式效果：

这里写图片描述
（2）内边距（可以调整盒子内部）

这里写图片描述

设置文本内容与上下左右边框的距离，可以统一设置padding，也可以分别设置上下左右内边距。

<html> <head>  <title>CSS的盒子模型2</title>  <style type='text/css'>    div{        width:200px;        height:100px;        border:2px solid blue;      }    #div22{        /*统一设置，上下左右的距离都是20像素          如果范围超出，边框就会变长        */        padding:20px;    }    #div23{        /*设置左边的内边距*/        padding-left:30px;    }  </style> </head> <body>  <div id='div21'>AAAAAA</div>  <div id='div22'>BBBBBB</div>  <div id='div23'>CCCCCC</div> </body></html>

这里写图片描述

（3）外边距（可以调整盒子的位置）margin

这里写图片描述

<html> <head>  <title>CSS的盒子模型3</title>  <style type='text/css'>    div{        border:2px solid blue;      }    #div32{        /*对上和下的距离进行分别设置*/        margin-top:20px;        margin-bottom:20px;    }    #div33{        /*对上下左右统一设置*/        margin:20px;    }  </style> </head> <body>  <div id='div31'>AAAAAA</div>  <div id='div32'>BBBBBB</div>  <div id='div33'>CCCCCC</div> </body></html>

样式效果：

这里写图片描述

本人是菜鸟一枚，当做学习笔记写博客。谢谢各路大咖驻足审阅

阅读全文

0 0

HTML/CSS 学习笔记（二）

CSS

CSS的基本选择器（三种）

CSS的扩展选择器 （三种）

CSS的盒子模型

CSS的扩展选择器（三种）