【css】

最新推荐文章于 2024-07-17 15:26:15 发布

远道学java

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量285

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/xmcxmc___/article/details/123610710

版权

css介绍

CSS是指层叠样式表 cascading style sheets
通过CSS可以让我们定义HTML元素如何显示。
CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

CSS与HTML结合方式

第一种方式内联/行内样式

在我们的HTML标签上通过style属性来引用CSS代码。

<div style="color:red">我爱中国</div>

优点:简单方便；
缺点:只能对一个标签进行修饰。

第二种方式内部样式表

通过<style>标签来声明CSS. 通常<style>标签我们推荐写在head和body之间，也就是“脖子”的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css</title>
</head>

<style>
    div{
        color:blue;
    }
</style>

<body>
    <div>我爱中国</div>
</body>
</html>

优点:可以通过多个标签进行统一的样式设置
缺点: 它只能在本页面上进行修饰

第三种方式外部样式表

单独定义一个CSS文件,注意CSS文件的后缀名就是.css
在<head>中使用<link>标签引用外部的css文件
css：

div{
    color:orange;
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css</title>
    <link rel="stylesheet" href="css/01.css">
</head>

<style>
    
</style>

<body>
    <div>我爱中国</div>
</body>
</html>

另一种引入css文件的方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css</title>
</head>

<style>
    @import 'css/01.css';
</style>

<body>
    <div>我爱中国</div>
</body>
</html>

关于外部导入css使用与@import的区别

加载顺序不同

@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有
修饰的页面，然后才看到修饰后的页面。
如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；

@import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

三种样式表的优先级：满足就近原则
内联 > 内部 > 外部

CSS的使用

css中选择器

元素(标签)选择器

对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

<style>
    h1{
        color:red;
    }
</style>

<body>
    <h1>hello,css</h1>
    <h1>hello,css</h1>
    <h1>hello,css</h1>
</body>

类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

<style>
    .a{
        color: red;
    }
    .b{
        color: blue;
    }
</style>

<body>
    <h1 class="a">hello,css</h1>
    <h1 class="b">hello,css</h1>
    <h1 class="c">hello,css</h1>
</body>

id选择器

只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

<style>
    #a{
        color: red;
    }
    #b{
        color: blue;
    }
    #c{
        color:orange;
    }
</style>

<body>
    <h1 id="a">hello,css</h1>
    <h1 id="b">hello,css</h1>
    <h1 id="c">hello,css</h1>
</body>

选择器组

逗号表示，谁和谁。
例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我,你,他{ 
	手机 
}

<style>
    .b,#a{
        color: red;
    }

    #c{
        color:orange;
    }
</style>

<body>
    <h1 id="a">hello,css</h1>
    <h1 class="b">hello,css</h1>
    <h1 id="c">hello,css</h1>
</body>

派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

后代：

<style>
    div p{
        color:red;
    }
</style>

<body>
    <div>
        <p>数学</p>
        <p>语文</p>
        <span>
            <p>古诗文</p>
            <p>文言文</p>
        </span>
    </div>
</body>

效果：
在这里插入图片描述
子代：

<style>
    div>p{
        color:red;
    }
</style>

<body>
    <div>
        <p>数学</p>
        <p>语文</p>
        <span>
            <p>古诗文</p>
            <p>文言文</p>
        </span>
    </div>
</body>

效果：
在这里插入图片描述

CSS伪类

CSS伪类可对css的选择器添加一些特殊效果
伪类属性列表：
:active 向被激活的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

<style>
    a:link{
        color: red;
    }
    a:visited{
        color: black;
    }
    a:hover{
        color: orange;
    }
    a:active{
        color: chartreuse;
    }
    li:first-child{
        color: red;
    }
</style>

<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <ul>
        <li>数学</li>
        <li>语文</li>
    </ul>
</body>

CSS基本属性

文本属性

属性	说明
指定字体	font-family : value;
字体大小	font-size : value；px：像素；em：倍数
字体加粗	font-weight : normal/bold;
文本颜色	color : value;
文本排列	text-align : left/right/center;
文字修饰	text-decoration : none/underline;
行高	line-height : value;
首行文本缩进	text-indent : value （2em）;

<style>
    p{
        font-family: 'Courier New', Courier, monospace;
        font-size: 100px;
        font-weight: bolder;
        color: red;
        text-align: center;
        text-decoration: underline;
        line-height: 50px;
    }
</style>

<body>
    <p>我爱你中国</p>
</body>

背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

background-color 设置元素的背景颜色。
background-image 把图像设置为背景。

background-image: url('img/1.jpg');

background-repeat 设置背景图像的墙纸效果，是否及如何重复
repeat：在垂直方向和水平方向重复，为重复值
repeat-x：仅在水平方向重复
repeat-y：仅在垂直方向重复
no-repeat：仅显示一次
background-position 设置背景图像的起始位置
控制水平方向 x轴：正值，向右移动；负值，向左移动
控制垂直方向 y轴：正值，向下移动；负值，向上移动

/* 图片向左移动50px，向下移动100px （可以为负值） */ 
background-position:50px 100px;

background-attachment 背景图像是否固定或者随着页面的其余部分滚动
默认值是 scroll：默认情况下，背景会随文档滚动
可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图
像

 <style>
    div {
      width: 500px;
      background-color: pink; /* 背景颜色 */
      background-image: url("img/cat.gif");
      background-repeat: no-repeat; /* 平铺方式*/
      background-position: 0px 100px; /*背景的位置（移动）*/
      background-attachment: fixed; /* 固定的背景*/
    }
  </style>

  <body>
    <div>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
      <h1>百度</h1>
    </div>
  </body>

列表属性

none：无标记。（去除标记）
disc：默认。标记是实心圆。
circle：标记是空心圆。
square：标记是实心方块。
decimal：标记是数字。
decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

  <style>
    .a {
      list-style-type: none;
    }
    .b {
      list-style-type: decimal-leading-zero;
    }
    .c {
      list-style-type: upper-roman;
    }
    .d {
      list-style-type: upper-alpha;
    }
    .e {
      list-style-image: url('img/list-img-2.gif');
    }
  </style>

  <body>
    <ul class="a">
      <li>曹操</li>
      <li>刘备</li>
      <li>孙权</li>
    </ul>

    <ol class="b">
      <li>吕布</li>
      <li>赵云</li>
      <li>典韦</li>
    </ol>
    <ol class="c">
      <li>关羽</li>
      <li>马超</li>
      <li>张飞</li>
    </ol>
    <ol class="d">
      <li>黄忠</li>
      <li>夏侯惇</li>
      <li>姜维</li>
    </ol>

    <ol class="e">
      <li>老孙</li>
      <li>老杨</li>
      <li>老西</li>
    </ol>
  </body>

边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

<style> 
    div{
        border-width: 20px; 
        border-color: green; 
        border-style: outset; 
    } 
</style> 
<body> 
    <div>hello</div>
</body>

border-style取值：
在这里插入图片描述

轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓和边框的区别：
边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

<style>
    div{
        width: 400px;
        height: 200px;
        border: 30px solid  darkcyan;
        outline: 5px dashed red;   /*轮廓*/
    }
</style>     
<body>             
    <div></div>
</body>

盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在这里插入图片描述

margin(外边距) - 盒子与盒子之间的距离
border(边框) - 盒子的保护壳
padding(内边距/填充) - 内填充，盒子边与内容之间的距离
content(内容) - 盒子的内容，显示的文本或图像

<style>
    div{
        width: 200px;
        height: 200px;
        border:2px solid greenyellow;
        margin-top: 50px;   /*上外边距*/
        margin-left: 100px;  /*左外边距*/
        padding-top:20px; /*上内边距*/
        padding-left:40px; /*左内边距*/
    }
</style>
<body> 
    <div>
        <img src="img/cat.gif">
    </div>
</body>

CSS定位

默认定位

块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
行内元素：a,span,等，从左向右，水平排列（不会换行）；不能改变宽高
行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

<style>
    div{
        width: 100px;
        height: 50px;
        border :1px solid red;
    }
    span{
        width: 100px;
        height: 100px;
        border :1px solid red;
    }
    input{
        width: 50px;
        height: 50px;
        border :1px solid red;
    }

    a {
        width: 50px;
        height: 50px;
        border :1px solid red;
        /* a标签是行内元素，无法改变宽高。但只要转换成行内块元素，就可以改变宽高了。 */
        display: inline-block;  /* 将a元素，显示成  行内块  */
    }
</style>
<body>
    

    <div>你好</div>
    <div>你好</div>
    <div>你好</div>
<hr>
    <span>大家好</span>
    <span>大家好</span>
    <span>大家好</span>
<hr>
    <input>
    <input>
    <input>

    <h1>如何让span标签也可以改变宽高</h1>
    <p>使用display属性，进行转换</p>

<hr>
    <a href="">百度</a>
    <a href="">百度</a>
    <a href="">百度</a>
</body>

浮动定位

让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
float取值：
none ：不浮动
left：贴着左边浮动
right：贴着右边浮动

<style>

    .da{
        width: 300px;
        height: 300px;
        border: 5px solid black;
    }
    .a,.b{
        width: 80px;
        height: 80px;
    }
    .a{
        background: darkcyan;   /*简写*/
        float: left;  /* 靠左边浮动 */
        margin: 10px;
    }
    .b{
        background-color: blue;
        float: right; /* 靠右边浮动 */
        margin: 10px;
    }

</style>
<body>
    
    <div class="da">
        <div class="a"></div>
        <div class="b"></div>
    </div>

</body>

在这里插入图片描述

相对定位

和原来的位置进行比较，进行移动定位（偏移）

<style>
        .yeye{
            width: 400px;
            height: 400px;
            background: olive;
            padding:30px;
        }
        
        .baba{
            width: 300px;
            height: 300px;
            position:relative; /* 爸爸定位 */
            background: black;
        }
        .a,.b,.c{
            width: 200px;
            height: 60px;
        }
        .a{
            background: palevioletred;
        }
        .b{
            background: darkcyan;
            position: absolute;   /*绝对定位*/
            top:30px;
            left: 50px;
        }
        .c{
            background: chocolate;
        }
        </style>
        <body>
            
            <div class="yeye">
                <div class="baba">
                    <div class="a"></div>
                    <div class="b"></div>
                    <div class="c"></div>
                </div>
            </div>
        </body>

在这里插入图片描述
注意：如果父级元素都没有定位，就以body来定位

固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

<style>
        .gg{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: fixed;
            top:100px;
            left: 500px;
        }
    </style>
    
      <body>
    
        <div class="gg"></div>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
        <h1>百度</h1>
      </body>

在这里插入图片描述

z-index

如果有重叠元素，使用z轴属性，定义上下层次。

<style>
        div{
            width: 200px;
            height: 80px;
        }
    
        .a{
            background: blueviolet;
            position:relative;
            z-index: 3;
        }
        .b{
            background: violet;
            position:relative;
            top:-20px;
            left: 30px;
            z-index: 2;
        }
    
    </style>
    <body>
        
        <div class="a"></div>
        <div class="b"></div>
    
    </body>

在这里插入图片描述
注意：
z轴属性，要配合相对或绝对定位来使用。
z值没有额定数值（整型就可以，具体用数字几，悉听尊便），z值大的显示在上面

CSS3

圆角

border-radius：左上右上右下左下;
border-radius：四个角;
border-radius：50%; 圆形

<style>
    div{
        width: 200px;
        height: 200px;
         background: orangered;
        /* border-radius:1px 10px 30px 50px; */
        /* border-radius: 30px; */
        border-radius: 50%;
    }
</style>
<body>      
    <div></div>
</body>

盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

<style>
    div{
        width: 200px;
        height: 200px;
        box-shadow: 20px 20px 60px 10px gray;
    }
</style>
<body>           
    <div></div>      
</body>

在这里插入图片描述

渐变

background:linear-gradient([方向/角度]，颜色列表)；

<style>
    div{
       width: 200px;
       height: 60px; 
       margin: 10px;
    }
    .a1 {
        background: linear-gradient(red,black);
    }
    .a2 {
        background: linear-gradient(red,black,pink, green);
    }
    .a3 {
        background: linear-gradient(to left,red,black);
    }
    .a4 {
        background: linear-gradient(to top left,red,black);
    }
    .a5 {
        background: linear-gradient(30deg,red,black);
    }
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
    <hr>
</body>

在这里插入图片描述

径向渐变

以圆心向外发散
background: radial-gradient(颜色列表);

  <style>
    div {
      width: 200px;
      height: 200px;
      margin: 10px;
    }
    .a1 {
      background: radial-gradient(red, black);
    }
    .a2 {
      background: radial-gradient(red, black, pink, green);
    }
    .a3 {
      border-radius: 50%;
      background: radial-gradient(red, black);
    }
  </style>

  <body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>

    <hr />
  </body>

在这里插入图片描述

背景

背景位置

background-origin：指定了背景图像的位置区域
background-origin属性：

border-box : 背景贴边框的边
padding-box : 背景贴内边框的边
content-box : 背景贴内容的边

 <style>
    div {
      background: url("img/1.jpg") no-repeat;
      width: 200px;
      height: 80px;
      margin: 20px;
      border: 10px dashed black;

      padding: 20px;
    }
    .a {
      background-origin: border-box;
    }
    .b {
      background-origin: padding-box;
    }
    .c {
      background-origin: content-box;
    }
  </style>

  <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </body>

在这里插入图片描述

背景裁切

background-clip属性:

border-box 边框开切
padding-box 内边距开切
content-box 内容开切

  <style>
    div {
      width: 200px;
      height: 80px;
      border: 10px dashed red;
      background-color: darkcyan;
      margin: 20px;
      padding: 20px;
    }
    .a {
      background-clip: border-box;
    }
    .b {
      background-clip: padding-box;
    }
    .c {
      background-clip: content-box;
    }
  </style>
  <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </body>

在这里插入图片描述

背景大小

background-size属性:
cover 缩放成完全覆盖背景区域最小大小
contain 缩放成完全适应背景区域最大大小

  <style>
    div {
      background: url("img/1.jpg") no-repeat;
      width: 200px;
      height: 100px;
      border: 2px solid red;
      margin: 20px;
    }
    .a {
      background-size: cover; /* 完全覆盖 */
    }
    .b {
      background-size: contain;  /* 完全适应 */
    }
  </style>
  <body>
    <div class="a"></div>
    <div class="b"></div>
  </body>

在这里插入图片描述

过渡动画

过渡

从一个状态到另一个状态，中间的“缓慢”过程；
缺点是，控制不了中间某个时间点。
transition｛1 2 3 4｝
1：过渡或动画模拟的css属性
2：完成过渡所使用的时间（2s内完成）
3：过渡函数。。。
在这里插入图片描述

4：过渡开始出现的延迟时间

transition: width 2s ease 1s;

目前，css3只开发出部分的过渡属性，下图所示：
在这里插入图片描述

<style>

    div{
        width: 100px;
        height: 50px;
        border: 2px solid red;
    }

    .a{
        transition: width 2s ease 1s;    /*1秒过后，div在2秒内匀速缓慢的变宽*/
    }

    div:hover{ width: 300px;}    /*触发div变宽*/

</style>
<body>
    
    <div class="a">Hello</div>

</body>

动画

从一个状态到另一个状态，过程中每个时间点都可以控制。
关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }
动画属性：animation{ 1 , 2 , 3 , 4 , 5 }
1：动画帧
2：执行时间
3：过渡函数
4：动画执行的延迟（可省略）
5：动画执行的次数
一个元素从左向右移动，3秒内执行2次

<style>
    div{
        width: 700px;
        border: 1px solid red;
    }

    @keyframes x{
        from{ margin-left: 0px;}
        to{ margin-left: 550px;}
    }

    img{
        animation: x 3s linear 2;
    }
</style>
<body>
    <div>
        <img src="img/cat.gif">
    </div>
</body>

一个元素从左向右移动，3秒内执行完成。无限次交替执行
infinite：无限次
alternate：来回执行（交替，一去一回）

<style>
.wai{
    width: 600px;
    height: 100px;
    border: 2px solid red;
}
.nei{
    width: 40px;
    height: 80px;
    margin: 5px;
    background: red;
}

.nei{
    animation: x 3s linear infinite alternate;
}

@keyframes x{
    0%{ margin-left: 0px; }
    25%{ background: yellowgreen; }
    50%{ background: goldenrod; }
    75%{ background: palevioletred;}
    100%{
        background: coral;
        margin-left: 550px;
    }
}
</style>

<body>
    <div class="wai">
        <div class="nei"></div>
    </div>
</body>

远道学java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】

css介绍CSS是指层叠样式表 cascading style sheets通过CSS可以让我们定义HTML元素如何显示。CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。CSS与HTML结合方式第一种方式内联/行内样式在我们的HTML标签上通过style属性来引用CSS代码。<div style="color:red">我爱中国</div>优点:简单方便；缺点:
复制链接

扫一扫