CSS入门必知必会

大家好，我是讯享网，很高兴认识大家。

CSS

css简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

css的三种引入方式

<head> <meta charset="UTF-8"> <title></title> <!--链接式--> <link rel="stylesheet" href="css/mycss.css" /> <!--内嵌式--> <style> /* 选择器 */ span{ 
      font-size: 20px; color: green; background-color: bisque; font-family: "微软雅黑"; } </style> </head> <body> <!-- 1行内式引入 借助标签的style属性引入 style属性中的值语法为 样式名:样式值; 样式名:样式值;... ... 2内嵌式 将css样式的代码抽取出来,通过选择器确定样式作用范围 在head标签中 使用一对style标签 定义css样式 在style标签中 注释写法 /* */ 减少相同代码的编写量 减少代码的维护工作量 3链接式 行内式只能将样式作用于当前标签 内嵌式可以将样式作用于多个标签不能作用于其他网页 链接式可以将样式的作用范围扩大多个不同网页 链接式可以将CSS代码放入独立的.css文件中 可以使当前页面更加简洁 每一个需要引入样式 的HTML 在head标签中使用 link标签引入css文件即可 4当三种引入方式同时作用于同一个标签 如果样式有冲突 谁的优先级更高 优先级原则 就近原则 --> <span style="font-size: 40px; color: blue; background-color: aqua;"> 欢迎观看 </span> <br /> <span > 欢迎观看 </span> <br /> <span > 欢迎观看 </span> <br /> <span > 欢迎观看 </span> <br /> <span > 欢迎观看 </span> </body>

讯享网

css外部样式文件

讯享网span{ 
    font-size: 20px; color: red; background-color: bisque; }

css的选择器

三大基本选择器

<head> <meta charset="UTF-8"> <title></title> <style> /* * 标签名选择器 给页面所有同名的标签定义样式的选择器 语法 标签名{样式} * */ span{ 
      background-color: skyblue; font-size: 40px; font-family: "楷体"; color: orangered; } /* id选择器 一般body中的任何一个标签都有id属性 id属性的值一般在同一个网页上是不允许有重复值 id属性一般用于帮助我们定位到页面上唯一的一个标签 id属性值命名有规则 不能有空格和一些特殊符号 特殊符号中仅可以使用_ 不推荐 $ 会和jquery命名冲突 不能以数字为开头 推荐写法 应为字母开头 数字放在后面 语法: #id值{样式} */ #p1{ 
      border: 1px dotted blue; background-color: gray; color: red; width: 100px; height: 100px; } /* 类选择器 一般body中的所有标签都有class属性 多个不同的标签可以有相同的class属性值 通过标签的class属性确定样式的作用范围 语法 .class属性值{样式} */ .c1{ 
      background-color: cadetblue; font-size: 50px; font-family: "微软雅黑"; color: black; text-decoration: none; } </style> </head> <body> <span id="s1">今天是2021年9月15日</span> <br /> <span id="s2">今天是2021年9月15日</span> <p id="p1">今天是2021年9月15日</p> <p id="p2">今天是2021年9月15日</p> <p id="p3" class="c1">今天是2021年9月15日</p> <h1 id="ha" class="c1">今天是2021年9月15日</h1> <a href="https://www.jd.com/" class="c1">京东</a> </body> </html>

其他选择器

讯享网 <head> <meta charset="UTF-8"> <title></title> <style> /* 层级选择器 通过层次关系定位样式的作用范围 层级选择器的每个层级的确定可以是标签名 id class * */ #p1 .s1{ 
      color: red; } /* * 属性选择器 * 根据标签的某个属性的特定属性值确定样式的作用范围 */ input[type=password]{ 
      width: 300px; height: 40px; } /* * 分组选择器 * 可以将多个不同层级关系 不同class属性 id 标签名同时使用相同的样式效果 * */ h1,.ch,.s2,#pa{ 
      color: green; } </style> </head> <body> <span>今天是2021年9月15日</span> <p id="p1"> <font> <span class="s1">天气晴</span> </font> </p> <input class="i" type="text" /> <input class="i" type="password" /> <input class="i" type="password" /> <input class="i" type="password" /> <h1 id="ha">今天是2021年9月15日</h1> <h2 class="ch">今天是2021年9月15日</h2> <span class="s2">今天是2021年9月15日</span> <p id="pa">今天是2021年9月15日</p> </body> </html>

伪类选择器

用于分别定义标签的四种状态
未访问过 :link{}
访问过 :visited{}
鼠标悬停 :hover{}
鼠标激活(鼠标按住不放) :active{}

讯享网

 <head> <meta charset="UTF-8"> <title></title> <style> /* * 伪类选择器可以四同时使用 也可以单个使用 * 如果是四个一块使用 注意顺序 */ a:link{ 
      color: black; text-decoration: none; } a:visited{ 
      color: darkgray; } a:hover{ 
      color: yellow; } a:active{ 
      color: darkred; } div{ 
      border: 1px double green; width:100px; height: 100px; background-color: lightyellow; } div:hover{ 
      background-color: yellow; } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <div></div> </body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1CStDeB-84)(E:\学习笔记\image-.png)]

盒子模型

其实就是通过标签的内边距和外边距的特点调整两个有包含关系的标签的位置

内边距

讯享网 <head> <meta charset="utf-8" /> <title></title> <style> #div1{ 
      border: 1px groove red; width: 400px; height: 400px; /*内边距 内部元素距离当前块元素边界的距离*/ /*同时设置上下左右四个内边距都是100px*/ /*padding:100px;*/ /*设置上下内边距为50px 左右内边距为100px */ /*padding:50px 100px;*/ /*设置 上 右 下 左 四个内边距*/ /*padding: 10px 20px 30px 40px;*/ /*分别单独设置四个内边距*/ padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; } </style> </head> <body> <div id="div1"> 今天是2021年9月15日 </div> </body>

外边距

 <head> <meta charset="UTF-8"> <title></title> <style> #div1{ 
      border: 1px solid red; background-color: darkseagreen; width: 300px; height: 300px; /*外边距 当前块标签外部的和父级块标签之间的距离*/ /*设置当前模块上下左右四个外边距都是200px*/ /*margin: 200px;*/ /*设置上下外边距为50px 设置左右外边距为100px*/ /*margin: 50px 100px;*/ /*设置 上 右 下 左 四个外边距(顺时针）*/ /*margin: 10px 20px 30px 40px;*/ /*单独设置四个外边距*/ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } </style> </head> <body> <div id="div1"></div> 今天是2021年9月15日 </body>

设置居中

讯享网 <head> <meta charset="UTF-8"> <title></title> <style> .outerdiv{ 
      width: 400px; height: 400px; border: 1px solid red; /*调整外边盒子的内边距*/ /*padding-top: 20px; padding-left: 20px;*/ /*通过外边距设置横向居中*/ margin: 0px auto; } .innerdiv{ 
      width: 200px; height: 200px; border: 1px solid green; /*设置盒子的外边距*/ /*margin-top: 20px; margin-left: 20px;*/ /*设置横向居中*/ margin: auto auto; } </style> </head> <body> <div class="outerdiv"> <div class="innerdiv"> 今天是2021年9月15日 </div> </div> </body>

块元素和行内元素的转换

 <head> <meta charset="UTF-8"> <title></title> <style> .div1{ 
      width: 200px; height: 200px; background-color: lightyellow; border: 1px solid lightcoral; margin: 0px auto; } .s1{ 
      /*行内元素设置宽和高未必有效 *块元素设置宽和高一定有效的 * */ width: 100px; height: 100px; background-color: greenyellow; border: 1px solid blue; /*span 是一个行内元素 * 行内元素没有盒子模型 * 行内元素没有办法设置内边距和外边距特征 * 只有块标签才有盒子模型 才可以设置内边距和外边距 * 如果一个行内标签 非要使用盒子模型那么可以将行内元素转换为块元素 * display block 行内转换为块 inline 块转换为行内 * */ display: block; margin-top: 20px; } </style> </head> <body> <div class="div1"> <span class="s1">今天是2021年9月15日</span> </div> </body>

浮动

可以让多个块标签处于同一行不用转换成行内元素宽和高以及盒子模型的特征的以保留

讯享网 <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .outerDiv{ 
      border: 1px solid blue; width: 1000px; height: 500px; margin: 0px auto; } #d1,#d2,#d3{ 
      border: 1px solid red; width: 400px; height: 200px; /*向右 浮动*/ /*float: right;*/ /*向左 浮动*/ float: left; margin-left:20px; margin-bottom: 20px; } #d1{ 
      background-color: greenyellow; } #d2{ 
      background-color:aqua; } #d3{ 
      background-color: blueviolet; } </style> </head> <body> <div class="outerDiv"> <div id="d1"> <h1>1</h1> </div> <div id="d2"> <h1>2</h1> </div> <div id="d3"> <h1>3</h1> </div> </div> </body>

定位

绝对定位

 <head> <meta charset="utf-8" /> <title></title> <style> .div1{ 
      height: 200px; width: 200px; background-color: gray; /*绝对定位 基于父级标签原点 移开以后会自动释放父级标签原点位置*/ position: absolute; top: 100px; left: 100px; } .div2{ 
      height: 200px; width: 200px; background-color: burlywood; position: absolute; top: 400px; left: 400px; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> </body>

相对定位

讯享网 <head> <meta charset="utf-8" /> <title></title> <style> .div1{ 
      height: 200px; width: 200px; background-color: gray; /*相对定位 相对于自身原来的位置,移开之后,不会释放原点位置*/ position: relative; top: 100px; left: 100px; } .div2{ 
      height: 200px; width: 200px; background-color: burlywood; position: relative; top: 100px; left: 100px; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> </body>

相对浏览器窗口定位

<head> <meta charset="utf-8" /> <title></title> <style> .div1{ 
      height: 200px; width: 200px; background-color: yellow; position: absolute; top: 0px; left: 0px; } .div2{ 
      height: 200px; width: 200px; background-color: burlywood; /*相对浏览器窗口定位*/ position: fixed; top: 100px; left: 100px; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> </body>

CSS入门 必知必会

CSS