Web-css（一）

最新推荐文章于 2024-06-28 07:00:00 发布

Half_orc

最新推荐文章于 2024-06-28 07:00:00 发布

阅读量911

点赞数

本文链接：https://blog.csdn.net/Half_orc/article/details/79127794

版权

简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

引入方式

1.内联引入

<div style="font-size:20px;color:#f00"> call me by your name</div>

2.内嵌引入

 <head >
 <meta charset="utf-8"/>
 <title>css内嵌引入</title>
 <style>
 div{
  font-size:30px;
  color:#f00;
  }
 </style>

3.外部引入

<head >
 <meta charset="utf-8"/>
 <title>css外部引入</title>
 <link rel="stylesheet" href="css1/4.css"/> <!--rel="stylesheet" 告诉浏览器这是一个样式表  href="CSS文件的路径" 链接引入对应的CSS文件-->
 </head>

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

4.@import导入文件

css文件

@import url(css/03.css)

导入其它css文件

<style>
@import url(css/03.css)
 </style>

小结：
1.优先级：link 、style同时存在，就近原则，后写的会覆盖先写的；内联优先级最高
2.link与@import的区别
· link是HTML标签，@import只能在CSS中使用
· link会在网页加载时同时加载，而@import需要网页完全载入才能加载
· link无兼容问题，@import 是CSS2.1以后加入的，兼容性一般
· link可以使用JS脚本控制，而@import不可以
3.各种方式优缺点
· 内联：与HTML混合在一起，代码不美观；内联样式一次，只能对一个标签起作用，如果有多个相同属性样式，需要重复写很多；可维护性差；可复用性差
· 内嵌：可复用性差；维护性一般；与HTML混在一起，不美观
· 外部引入：将CSS与HTML独立出来，代码整洁；可复用性高；可维护性高

选择器

1.标签选择器、class选择器、id选择器、通配符、关系选择器

<!doctype html>
<html>
 <head >
 <meta charset="utf-8"/>
 <title>css选择器</title>
 <style>
  *{border:1px solid black;}  /*通配符：适用于所有元素*/
  div{                          /*标签选择器*/
   width:400px;
   height:200px;
   background:lightgray;

   }
   p{                           /*标签选择器*/
    background-color:lightblue;
   }
   .mars{                      /*class选择器*/
    background-color:lightpink;
   }
   #seal{                      /*id选择器*/
    background-color:lightgreen;
   }
   div p{                     /*后代选择器*/     /*关系选择器*/
   background-color:red;
   }
   div>a{                     /*子级选择器*/
   background-color:olive;
   }
  </style>
 </head>
 <body>
  <div >call me by your name </div>
  <div>lady bird</div>
  <p>suicide is painless</p>
  <p class="mars">and then you </p>
  <p id="seal">stand by me</p>

  <div>
   <a>kris</a>
   <p>ulysse
    <a>wu</a>
   </p>
  </div>
  <p>raindrops</p>
 </body>

</html>

这里写图片描述

2.伪类

.box1 p{
     display:none;
   }
   .box1:hover p{    /*伪类：hover 鼠标移入时显示*/
    display:block;
    }


    .box2 p{
     display:none;
     }
    .box2:active p{   /*伪类：active 鼠标按下时显示 抬起时隐藏*/
     display:block;
     }

<div class="box1">
   <p>龙之介</p>
  </div>

  <div class="box2">
   <p>地狱变</p>
  </div>

1.优先级：!important(属性后面加)>#id选择器>.class选择器>标签选择器>*通配符
2.注意：
· 一个页面中只出现一个id选择器（唯一标识）
·一般不用id作为选择器，因为其优先级较高
· class命名：多个但此时用 - 连接 eg：word1-word2

盒模型一

显示=width+padding+border
（box-sizing:content-box）

1.基本语法

<!doctype html>
<html>
 <head >
 <meta charset="utf-8"/>
 <title>css盒模型</title>
 <style>
  div{
   width:200px;
   height:100px;
   padding:200px; /*填充*/
   border:10px solid hotpink;/*边框 参数：粗细 线型 颜色*/
   margin:30px;/*外边距*/
   background-color:gold;
  }
  </style>
 </head>
 <body>
  <div >call me by your name </div>

 </body>

</html>

这里写图片描述

这里写图片描述
2.padding margin

padding-top:20px;   /*默认四个边一样 若想不同 分别设置 */
padding-right:30px;
padding-bottom:20px;
padding-left:40px;

padding:20px 30px 20px 40px; /*顺时针方向：上右下左*/

padding：20px 30px 40px;/*上 右左 下*/

padding：20px 30px; /*上下 右左*/

/*margin与其用法同*/

块级元素水平居中：margin-left:0;margin-right:0;

3.border

    border-left:5px solid purple;/*可一起设置*/

    border-width:5px;  /*也可分开设置*/
    border-left-style:dashed;
    border-right-style:dotted;
    border-top-style:solid;
    border-bottom-style:groove;
    border-left-color:plum;

这里写图片描述

4.实例：

    p:nth-of-type(1){ /*第一个p标签*/
    border-style:solid;
    border-width:40px;
    border-left-color:pink;
    border-right-color:transparent;/*透明*/
    border-top-color:transparent;
    border-bottom-color:transparent;

   }
    p:nth-of-type(2){ /*第二个p标签*/
    border-style:solid;
    border-width:40px;
    border-left-color:transparent;
    border-right-color:navy;
    border-top-color:transparent;
    border-bottom-color:transparent;

这里写图片描述

盒模型二

显示=width
(最初为IE的盒模型,后来在CSS3可以设置属性 box-sizing:border-box；）

两种盒模型对比

Half_orc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web-css（一）

简介层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。引入方式1.内联引入div sty
复制链接

扫一扫