CSS基础②

最新推荐文章于 2023-06-30 17:24:14 发布

冷山寒水

最新推荐文章于 2023-06-30 17:24:14 发布

阅读量436

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_66768178/article/details/124489423

版权

1、什么是CSS3层叠样式表

Cascading Style Sheet层叠样式表，可以通过多个样式去表现。

2、div属于块级元素，占一整行。

3、span属于行内元素，出现新的span并不会换行。

 <div>元素</div>
  <div>元素</div>
  <span>元素</span>
  <span>元素</span>

样式如上

4、CSS的基本语法结构

  <style>
          选择器{
              声明1；
              声明2；
              声明3；
          }
      </style>

5、三种引入CSS的方式

（1）行内样式:直接在标签中编写声明。

  <p style="font-size:20px">Css3</P>

（2）内部样式表：在同一个HTML页面<head></head>中，使用style属性引入CSS样式。

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>class</title>
  
  <!-- <link href="style.cass" rel="stylesheet" type="text/css"/> -->
  <style type="text/css"><!--type="text/css"可不写，如果写一定要写对-->
      h2{
          font-size:25px;
          color:black;
      }
      .redColor{
          color:red
  }
  </style>
  <!-- @import url("style.css"); -->
  </head>
  <body>
      <h2>望庐山瀑布</h2>
      <p style="font-size:16px;color:green;">
      日照香炉生紫烟，<br/>
  
      遥看瀑布挂前川。<br/>
  
      飞流直下三千尺，<br/>
  
      疑是银河落九天。<br/>
      </p>
  </body>
  </html>

效果样式如上

优点：方便在同页面中修改样式缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

（3)外部样式表

1）链接外部样式表，不需要放入style属性内

  <head>
  <link href="style.cass" rel="stylesheet" type="text/css"/>
  </head>

href引入路径，rel="stylesheet"和type="text/css"内容不变

** 2）导入外部样式表**

 
  <head>
  <style type="text/css">
      @import url("style.css");
  </style>
  </head>

链接式与导入式的区别：<link/>标签属于XHTML，@import是属于CSS2.1使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

6、css引入顺序比较

当样式冲突时：行内样式>内部样式表>外部样式表

7、css选择器

7.1基本css选择器有三种：标签选择器、类选择器、ID选择器

1）标签选择器

如<h1>…<h6>、<p>、<img/>

  <style>
      h2{
          font-size:25px;
          color:black;
      }
     
  </style>

2）类选择器

  <head>
  <style>
      .redColor{
          color:red
  }
  </style>
  </head>
  <body>
      <span class="redColor">遥看瀑布挂前川</span>。<br/>
  </body>

格式如下：

<标签名 class= "类名称">标签内容</标签名>

.类名称 { font-size:16px;}

1）ID选择器

  <head>
  <style>
      #redColor{
          color:red
  }
  </style>
  </head>
  <body>
      <span id="redColor">遥看瀑布挂前川</span>。<br/>
  </body>

格式如下：

#id名称 { font-size:16px;}

8、选择器顺序比较

** ID选择器>类选择器>标签选择器**

 <style>
      h2{
          font-size:25px;
          color:black;
      }
      .redColor{
          color:red;
      }
      #blue{
              color:blue;
          }
  
  </style>
  
  <!-- @import url("style.css"); -->
  
  </head>
  <body>
      <h2>望庐山瀑布</h2>
      <p style="font-size:16px;color:green;">
      <span class="redColor">日照香炉生紫烟，</span><br/>
  
      <span class="redColor" id="blue">遥看瀑布挂前川。</span><br/>
  
      飞流直下三千尺，<br/>
  
      疑是银河落九天。<br/>
      </p>
  
  </body>
  </html>

7.2层次选择器

1）后代选择器：选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内（E F）

 <style>
          body h1{
              color:brown;
          }
      </style>
  </head>
  <body>
      <h1>11111</h1>
      
      <div>
          <h1>22222</h1>>
      </div>
      
     
  </body>
  </html>

只需要被包裹，无论中间是否有其他标签。

2）子选择器：选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素（E>F）


      <style>
          body>h1{
              color:brown;
          }
      </style>
  
  
  </head>
  <body>
      <h1>11111</h1>
      <h2>11111</h2>
      <h1>11111</h1>
      <div>
          <h1>22222</h1>
      </div>
        <h1>11111</h1>
     
  </body>
  </html>

必须是子元素，中间不可以包括其他元素。

3）相邻兄弟选择器：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面（E+F）

 <style>
          .cc+h1{
              color:brown;
          }
</style>
  
  
  </head>
  <body>
      <h1 class="cc">11111</h1>
      <div>
          <h1 class="cc">11111</h1>
          <h1 class="cc">11111</h1>
          <h1>11111</h1>
          <h1 class="cc">11111</h1>
          <h1>11111</h1>
  
      </div>
      <div>
          <h1>22222</h1>
      </div>
        <h1>11111</h1>
     
  </body>
  </html>

首先EF是同一个类型，同一个基本选择器。同时两个位置紧贴一起，且前一个必须满足+号之前的“xx”条件。

4）通用兄弟选择器：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素（E~F）

  <style>
          .cc~h1{
              color:brown;
          }
      </style>
  
  
  </head>
  <body>
      <h1 class="cc">11111</h1>
      <div>
          <h1 class="cc">11111</h1>
          <h1 class="cc">11111</h1>
          <h1>11111</h1>
          <h1 class="cc">11111</h1>
          <h1>11111</h1>
  
      </div>
      <div>
          <h1>22222</h1>
      </div>
        <h1>11111</h1>

同一层级下，只要第一个满足E~F条件，其下面的所有都满足。

7.3结构伪类选择器

1）E:first-child：作为父元素的第一个子元素的元素E

所有层级的第一个元素是否符合条件。

2）E:last-child：作为父元素的最后一个子元素的元素E

<body>标签中最后一个元素不会被选中。

3）E F:nth-child(n)：选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

4）E:first-of-type：选择父元素内具有指定类型的第一个E元素

   <style>
          h1:first-of-type{
              color:brown;
          }
      </style>
  
  
  </head>
  <body>
      <h1>11111</h1>
      <div>
          <h1>11111</h1>
          <h1>11111</h1>
          <h1>11111</h1>
      </div>
      <div>
          <h2>22222</h2>
          <h1>22222</h1>
          <h1>22222</h1>
      </div>
      <h1>11111</h1>
  </body>

5）E:last-of-type：选择父元素内具有指定类型的最后一个E元素

6）E F:nth-of-type(n)：选择父元素内具有指定类型的第n个F元素

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点 E F:nth-child(n)在父级里从一个元素开始查找，不分类型E F:nth-of-type(n)在父级里先看类型，再看位置

7.4属性选择器

E[attr]：选择匹配具有属性attr的E元素

E[attr=val]：选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

E[attr^=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

E[attr$=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

 <style>
           h1[id]{
              color:rgb(33, 201, 223);
          
           }
          h1[name="cl"]{
              color:brown;
          }
          h1[name^="cc"]{
              color:rgb(54, 57, 218);
          }
          h1[name$="cor"]{
              color:rgb(23, 146, 29);
          }
          h1[name*="v"]{
              color:rgb(206, 20, 212);
          }
  
      </style>
  </head>
  <body>
      
      <div>
          <h1 id="l">11111</h1>
          <h1 name="cl">11111</h1>
          <h1 name="ccl">11111</h1>
          <h1  name="cor">11111</h1>
          <h1  name="vv">11111</h1>
      </div>
     
  </body>

8、字体样式：都放入选择器中

1）font-family：设置字体类型

font-family：Verdana,"楷体"；可同时几个，先英文字体后中文。

与后面字体冲突时，以前面字体为准。

2）font-size：设置字体大小

单位：px:像素；em:相对父节点的大小；rem:相对<body>的大小；cm:厘米；mm:毫米；pt:1/72寸；pc:1/6寸；

font-size：2em;

3）font-style：设置字体风格

normal:普通；italic：斜体；oblique：倾斜；

font-style：normal；

4）font-weight：设置字体的粗细

有100-900等级，normal:400默认大小；bold:700加粗；bolder：更粗；lighter：更细；

font-weight:lighter;

5）font：在一个声明中设置所有字体属性

顺序为：文字风格,文字粗细，文字大小，文字字体

font：oblique bold 12px "楷体"

9、关于文本

1）color：设置文本颜色

三种写法：1.纯英文，red;

** 2.RGB或RGBA（#FFF或者#FFFFFF），第一个分别对应红，绿，蓝的百分比，第二个使用两位数的十六进制表示。可多加一位表示透明度，0为最透明，F为最不透明。**

3.color:rgb(0,255,255);color:rgba(0,0,255,0.5);

color:#EEFF66; color:rgb(0,255,255); color:rgba(0,0,255,0.5);

2）text-align：设置元素水平对齐方式

** left:靠左，把文本排列到左边。默认值：由浏览器决定**

 right:靠右，把文本排列到右边

 center:居中，把文本排列到中间

 justify:两端对齐，实现两端对齐文本效果

** text-align：left；**

3）text-indent：设置首行文本的缩进

4）line-height：设置文本的行高

5）text-decoration：设置文本的装饰

** none：默认值，定义的标准文本**

 underline：设置文本的下划线

 overline：设置文本的上划线

** line-through：设置文本的删除线**

  
   <style>
          h2{
          color:blue;
          text-align:center;
          }
          h5{
              text-align:right;  
          }
          p{
              line-height:25px;
              text-indent:35px;
          }
          .red{
              color:red;
          }
  .de{
      text-decoration: underline;
      color:rgba(0,0,255,0.5);
  }
      </style>
  
  </head>
  <body>
      <h2>总裁致辞</h2> 
      <h5>来源：来自北大青鸟</h5>
      <hr/>
      <p>  <img src="图片/icon.jpg" alt="高管团队" title="高管团队"/>
         目前北大青鸟IT教育全体系员工<span class="red">10000</span>余名、授权培训中心<span class="red">180</span>余家、合作院校<span class="red">500</span>余所、覆盖全国90余座城市，市场占有率达到<span>39.8%</span>。
      </p>  
      <p>     
          <span class="de">人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报</span>等几十家权威媒体对公司进行了多方面的报道。
      </p>
      <p>
          北大青鸟IT教育先后培养<span class="red">45</span>万名学员进入IT行业。
      </p>
  </body>
  </html>

10、文本阴影和垂直对齐

文本阴影:text-shadow : color x-offset y-offset blur-radius;

垂直对齐方式vertical-align属性：middle、top、bottom

  
   h2{
          color:blue;
          text-align:center;
          text-shadow : red 2px 2px 2px;
  
          }
          img{
              vertical-align:middle;
          }

  
    img,.i{
              vertical-align:middle;
          }
         
  
  <body>
    
      <p>  <img src="图片/icon.jpg" alt="高管团队" title="高管团队"/>
  
         <span class="i">目前北大青鸟</span>目前北大青鸟IT教育全体系员工
      </p>

11、超链接伪类

1）a:link未单击访问时超链接样式

 a:link{color:#9ef5f9;}

2）a:visited单击访问后超链接样式

 a:visited {color:#333;}

3）a:hover鼠标悬浮其上的超链接样式

 a:hover{color:#ff7300;}

4）a:active鼠标单击未释放的超链接样式

 a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

  
      <style>
          .a:link{
              color:#9ef5f9;
          }
          .b:visited{
              color:#333;
          }
          .c:hover{
              color:#ff7300;
          }
          .d:active{
              color:#999;
          }
  
      </style>
          。。。。。。
          
      <a  href="李清.html"  target="_blank" class="a">111111</a>
      <a  href="李清照.html"  target="_blank" class="b">22222</a>
      <a  href="李清照清.html"  target="_blank" class="c">3333333</a>
      <a  href="李清照清平.html"  target="_blank" class="d">4444444</a>

12、列表样式

12.1list-style-type

1）none无标记符号

 li { list-style:none; }

 去除列表前面的小黑点

2）disc实心圆，默认类型

 list-style-type:disc;

3）circle空心圆

 list-style-type:circle;

4）square实心正方形

 list-style-type:square;

5）decimal数字

** list-style-type:decimal**

13)网页背景

1）背景颜色 background-color2）背景图像 background-image:url(“图片路径”);

3）背景重复方式 background-repeat属性 repeat：沿水平和垂直两个方向平铺 no-repeat：不平铺，即只显示一次 repeat-x：只沿水平方向平铺 repeat-y：只沿垂直方向平铺

4）背景定位 background-position属性

1.Xpos Ypos。单位：px，Xpos表示水平位置，Ypos表示垂直位置

2.X% Y%使用百分比表示背景的位置

3.X、Y方向关键词水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

5）背景尺寸

background-size

1.auto：默认值，使用背景图片保持原样

2.percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

3.cover：整个背景图片放大填充了整个元素

4.contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

6）线性渐变

background:linear-gradient ( to left, color1, color2,…);

13、盒子模型

一个页面上所有的元素（标签）都存在自己的一个盒子模型

具体分为4个部分：

content:内容部分

padding:内容到边框的距离

border:盒子的边框

margin:外边框，到其他标签的距离

1）边框border

修改顺序

针对某一个属性的修改：xxx-top/bottom/lef/-xxx

颜色：

上边框颜色：border-top-color：blue;

同时四个边框颜色：border-color：blue;

第一个改上下，第二个改左右：border-color：red blue;

第一个改上，第二个改下，第三个左右border-color：yellow red blue;

顺时针修改上右下左：border-color：yellow red blue green;

宽度：

细：thin

medium：中等

thick：粗

borfer-width:thin medium thick 20px;

样式：

none:看不见值清空

hidden看不见值清空

dashed圆点虚线

solid 实线

double空心线

border-style：solid double；

简体写法：

border：red solid 5px;

2)外边距Margin

设置大小

与边框写法一样

margin：0px auto;当设置左右时，写入auto自动对齐；

若想自动对齐需满足：块元素、固定宽度

3）内边距padding

逻辑一样

4）计算一个标签具体占页面的位置

div{

height:100px;

width:500px;

margin:10px;

border:1px solid red;

padding:5px;

}

左外边距+左边框+左内边距+内容+右外边距+右边框+右内边距

10+1+5+500+5+1+10

5）box-sizing盒子尺寸

1.如果box-sizinginherit：继承父标签，根据父标签的值

height:100px;

width:500px;

margin:10px;

border:1px solid red;

padding:5px;

2.如果box-sizing：content-box

内容宽度为500px(width:500px)

3.如果box-sizing：border-box

内容宽度为488px

左边框1+左内边距5+内容488+右外边距5+右边框1=500

4.<span>让几个文字突出显示：<span class="show">baida<span>

设置元素水平对齐方式:

4.三种方式引入CSS

1、行内样式

先行，内，外部

标签选择器

类选择器使用：.+class的名称

ID选择器，#+id的名称

同一个标签被多个选择器选中时：标签<类选择器<id

id>class>标签

EF只需要被包裹，无论之间有没有其他

E>F只有上一级才可以。l

style中如果有E+F ,先找到所有F一类标签，如果上方他的同一等级是他的相同标签，则参考E+F法则，上级满足E。

分不同层级下的第一个？

.ab{

 display: inline-block;

 }

 .cd{

 display: inline-block;

 }

 .ef{

 display: inline-block;

 }

 .jh{

 display: inline-block;

 }

冷山寒水

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础②

1、什么是CSS3层叠样式表Cascading Style Sheet层叠样式表，可以通过多个样式去表现。2、div属于块级元素，占一整行。3、span属于行内元素，出现新的span并不会换行。 <div>元素</div> <div>元素</div> <span>元素</span> <span>元素</span>样式如上4、CSS的基本语法结构 <style&g
复制链接

扫一扫