走进CSS—I

简介: 走进CSS—I

点击链接走进前端学习:https://blog.csdn.net/qq_53810245/article/details/116831968

@TOC

在这里插入图片描述
学习心得:在网页中进行样式的调试。调试完成后将代码粘贴到自己的代码中

一、走进CSS

1、CSS的简单介绍

网页 = HTML结构 + CSS表现 + JavaScript交互,做一些动作
CSS中尽量避免使用逗号,尽可能使用空格

1、什么是CSS

1.1、什么是CSS

Cascading Style Sheet层叠级联样式表
CSS:表现(美化网页)
字体、颜色、边距、高度、宽度、北京图片、网页定位、网页浮动……
在这里插入图片描述

1.2、发展史

CSS1.0,实现字体加粗之类的相关变化
CSS2.0,实现DIV(块)+ CSS + Html与CSS结构分离的思想,网页变得简单,SEO
CSS2.1,浮动、定位
CSS3.0,圆角,阴影,动画……
在这里插入图片描述

2、CSS快速入门

在这里插入图片描述

<style></style>

选择器{
    声明1; 
    声明2;
    声明3;
}

在这里插入图片描述
<head></head>中,用<link rel="stylesheet" href="css/style.css">引入css文件
在这里插入图片描述

3、CSS的优势:

  • 内容和表现分离
  • 网页结构表现统一,可以实现复用
  • 样式十分的丰富
  • 建议使用独立于html的css文件
  • 利用SEO ,容易被搜索引擎收录!

    4、CSS的3种导入方式

    行内样式(内联样式)

    在标签元素中,编写一个style属性,编写样式即可
    <h1 style="color:red">我是标题</h1>

    内部样式(内嵌样式表)

    <head>
    <style type="text/CSS">
      选择器(选择的标签) {
          
           
        属性1: 属性值1;
        属性2: 属性值2; 
        属性3: 属性值3;
      }
    </style>
    </head>
    

    外部样式(外链式)

    <head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
    </head>
    
    rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
    type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略
    href :定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
    注意
  • link 是个单标签。
  • link标签需要放在head头部标签中,并且指定link标签的三个属性

优先级:就近原则
行内样式 > 谁离行内样式近谁的优先级就高
拓展:外部样式的两种写法

  • 链接式:
    是html标签,只能放入html源码中使用
    <head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
    </head>
    
  • 导入式 :
    作为css样式,作用是引入css样式功能,是css2.1特有的!
    <head>
    <style>
            @import url("css/style.css");
    </style>
    </head>
    

2、CSS选择器(重点+难点)

作用:选择页面上的某一个或者某一类元素

2.1、基本选择器

1、标签选择器

格式标签{}
特点:选择一类标签,标选择器会选择到页面上的所有的这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        h1 {
    
    
            color: chocolate;
            background: aqua;
            border-radius: 24px;
        }
        p{
    
    
            font: 80px;
        }
    </style>
</head>
<body>
<h1>这是第一个标题</h1>
<p>选择器学习</p>

</body>
</html>
2、类选择器 clsss

格式.class的名称{}
优点可以多个标签归类,是同一个 class ,可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        .bh1{
    
    
            color: #00ffff;
        }
        .bh2{
    
    
            color: chocolate;
        }

    </style>
</head>
<body>
<h1 class="bh1">这是第一个标题</h1>    text-align: center;

<h1 class="bh2">这是第二个标题</h1>
<p class="bh1">这是第三个标题</p>

</body>
</html>
3、id 选择器

格式#id的名称{}
优点id是全局唯一的,精准定位

<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        #bh1{
    
    
            color: #00ffff;
        }
        .bh2{
    
    
            color: chocolate;
        }

    </style>
</head>
<body>
<h1 class="bh2" id="bh1">这是第一个标题</h1>
<h1 class="bh2">这是第二个标题</h1>
<p class="bh1">这是第三个标题</p>

</body>

==不遵循就近原则,优先级:id 选择器 > class 选择器 > 标签选择器==

2.2、层次选择器

<body>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

1、后代选择器:在某个元素的后面
祖爷爷 爷爷 爸爸 我

body p{
   
   
    /*在body下的所有p标签,均做背景颜色改动*/
    background:red;
}

2、子选择器
只有一代:爸爸 你

body>p{
   
   
    /*只有在body下的第一代p标签,才做背景颜色改动。只有p1,p2,p3做改动*/
    background:red;

3、相邻兄弟选择器
同辈,同级,但只对下

/*.active下的一个相邻p标签*/
.active + p{
   
   
    background:red;
}

4、通用选择器
对下不对上,当前选中元素的向下的所有兄弟元素

/*.active下的所有p标签*/
.active~p{
   
   
    background:red;
}

2.3、结构伪类选择器

伪类:所有带:的,条件选择器
当鼠标移入时触发该事件a:hover{ background:red; }

<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

问题:在不使用class、id选择器时,针对于以上body结构,当我们只想选中ul的第一个子元素,应该怎么办呢?

<style>
    /*选中ul的第一个子元素*/
    ul li:first-child{
        background:red;
    }
    /*选中ul的最后一个子元素*/
    ul li:last-child{
        background:red;
    }

p:nth-child(1){}:选择当前P元素的父级元素,选择父级元素的第一个元素,并且是当前元素才生效!

    /*选中p1:定位到父级元素,选择当前的第一个元素*/
    p:nth-child(1){
        background:red;
    }

p:nth-of-type(1){}:选择父级元素下达第二个为p的标签

    /*选中父元素下的p元素的第二个类型*/
    p:nth-of-type(1){
        background: rebeccapurple;
    }

在这里插入图片描述

2.4、属性选择器【常用】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        .demo a{
    
    
            float: left;/*向左浮动*/
            display: block;/*块距元素*/
            height: 50px;
            width: 50px;
            border-radius: 10px;/*圆角边框*/
            background: cyan ;
            text-align: center;/*对齐方式*/
            color: rebeccapurple;/*字体颜色*/
            text-decoration: none;/*去掉下划线*/
            margin-right:5px ;/*分开加外边距向右偏移*/
            font: bold 20px/50px Arial;/*字体粗体+字体大小/行高*/
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="https://baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active"target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item">10</a>
</p>

</body>
</html>
  • =:是绝对等于
  • *=:是模糊等于,包含这个元素
  • ^=:以这个开头
  • $=:以这个结尾
  • a[属性名或属性名=属性值(正则)]{}
    a[id=first]{background:green;}:id=first的元素
    a[class*="links"]{}:class中由links的元素
    a[href^=http]{}:选中href中以http开头的元素
    a[href$=pdf]{}:选中href中以pdf结尾的元素
    补充:
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
    
    
        color: blue;
      }
      p[title='one'] {
    
    
        color: red;
      }
      p[title~='two'] {
    
    
        color: green;
      }
      p[title|='three'] {
    
    
        color: pink;
      }
    </style>
  </head>

  <body>
    <p title="five">我爱学习</p>
    <p title="one">我爱运动</p>
    <p title="one two">我爱吃饭</p>
    <p title="three-four">我爱睡觉</p>
  </body>
</html>

3、美化网页元素(文字、阴影、超链接、列表、渐变)

3.1、为什么要美化网页

1、有效的传递页面的信息
2、美化网页,页面漂亮才会吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签:重点要突出的字,使用该标签套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>龙芯浏览器</title>
    <style>
        #fo{
    
    
            font-size: 50px;
        }
    </style>
</head>
<body>
    欢迎来到我的 <span id="fo">空间</span>
</body>
</html>

3.2、字体样式

font-family:字体样式
font-size:字体大小
font-weight:字体粗细,:bold粗体,:lighter细体
color:字体颜色

p{
    font:oblique bolder 16px "楷体";
}

3.3 文本样式

1、颜色

  1. RGB(六位):
    • 000000【黑色】

    • FF0000【红色】

    • 00FF00【绿色】

    • 0000FF【蓝色】

  2. RGBA:红+绿+蓝+透明度[0-1之间]
    • color:rgba(0,255,255,0.5)
      2、文本对齐的方式
    • text-align:center:文本排版[leftright]
      3、首行缩进
    • text-indent:2em:段落首航缩进2字符
      4、行高
    • line-height:30px:行高,如果和块的高度一致就可以上下居中——单行文字上下居中
      5、上、中、下划线
    • text-decoration:overline;:上划线
    • text-decoration:line-through;:中划线
    • text-decoration:underline;:下划线
      6、去掉超链接下划线
      a标签默认有下划线,因此text-decoration:none;可以超链接去掉下划线
      7、文本&&图片水平对齐
      img,span{vertical-align: middle;}:文本&&图片水平对齐
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>龙芯浏览器</title>
      <style>
        img,span{
              
              
            vertical-align: middle;
        }
      </style>
      </head>
      <body>
      <img src="image/a.jpg" alt="">
      <span>空间冷冷冷冷类</span>
      </body>
      </html>
      

3.4 阴影

在这里插入图片描述
水平:左——右:负——正
垂直:下——上:正——负
#price{ text-shadow: 5px 5px 5px darkgray; }:水平偏移x、垂直偏移y、模糊半径、及其阴影颜色

3.5 CSS伪类

格式:

selector:pseudo-class {
  property: value;
}

锚伪类:链接能够以不同的方式显示:
a:link { color: #FF0000;}:未访问的链接
a:visited { color: #00FF00;}:已访问的链接
a:hover { color: #FF00FF;}:鼠标悬停链接【重点】
a:active {color: #0000FF;}:已选择的链接

3.6 列表

在这里插入图片描述

list-style :
none:去掉圆点
circle :空心圆
decimal :变成数字有序列表
square :正方形

ul li{
   
   
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

对a标签进行修饰

a{
   
   
    text-decoration: none;
    font-size: 14px;
    color: #000000;

}
a:hover{
   
   
    color: aqua;
    text-decoration: underline;
}

3.7 背景

背景颜色
背景图片
在这里插入图片描述
.div1{background-repeat: repeat-x;}:水平平铺
div2{ background-repeat: repeat-y;}:垂直平铺
.div3{background-repeat: no-repeat;}:不平铺
border: 1px solid red;:边框:粗细1px 样式solid实线(dashed虚线) 颜色red
background-position: 236px 2px;:背景位置

<style>
        div{
   
   
                width: 1000px;
                height: 700px;
                /*边框:粗细1px 样式solid实线 颜色red*/
                border: 1px solid red;
                /*默认是全部平铺*/
                background-image: url("images/logo.png");
        }
        /*水平平铺*/
        .div1{
   
   background-repeat: repeat-x;}
        /*垂直平铺*/
        .div2{
   
    background-repeat: repeat-y;}
        /*不平铺*/
        .div3{
   
   background-repeat: no-repeat;}
</style>

在这里插入图片描述

3.8 背景渐变

取得渐变色颜色网址点击跳转在这里插入图片描述

    <style>
        body{
   
   
            /*background-color: #21D4FD;*/
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
    </style>

4、盒子模型

4.1 什么是盒子模型

在这里插入图片描述
margin:外边距
padding:内边距
border:边框

4.2 边框

因为浏览器的原因,body总有默认的选项:外边距margin,内边距padding,下划线text-decoration,因此在写代码前将其初始化为0

<style>
        /*body总有默认的选项:外边距margin,内边距padding,下划线text-decoration,因此在写代码前将其初始化为0*/
        h1,ul,li,a,body{
    
    
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
</style>

border: 1px solid red;
1、边框的粗细 1px
2、边框的样式 solid实线,dashed虚线
3、边框的颜色

4.3 内外边距

在这里插入图片描述
在这里插入图片描述

盒子的计算方式:看你这个元素有多大?
网页大小 = margin + border + padding + 内容宽度

  • 内边距padding
  • padding:0 0 0 0;代表顺时针设置边距
  • padding:0 auto;代表上下边距0,左右边距自动
  • 外边距margin可以实现居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>盒子模型</title>
      <style>
          body {
          
          
              /*body总有一个默认的外边距margin: 0;*/
              margin: 0;
              padding: 0;
              text-decoration: none;
          }
          #box {
          
          
              width: 300px;
              border: 1px solid red;
              margin: auto auto;
          }
          h2{
          
          
              font-size: 16px;
              background: #21D4FD;
              line-height: 28px;
              color: chartreuse;
              margin: auto auto;
          }
          form{
          
          
              background:#21D4FD;
          }
          input{
          
          
              border: 1px solid black;
          }
          div:nth-of-type(1){
          
          
              padding: 10px 2px;
          }
      </style>
    </head>
    <body>
    <div id="box">
      <div id="box-h2"><h2 id="box-hh2">京东会员</h2></div>
      <form action="#">
          <div>
              <span>用户名:</span>
              <input type="text" placeholder="邮箱/用户名/已验证手机">
          </div>
          <div>
              <span>&emsp;码:</span>
              <input type="password" placeholder="请输入密码">
          </div>
          <div>
              <span>&emsp;箱:</span>
              <input type="text" placeholder="请输入密码">
          </div>
      </form>
    </div>
    </body>
    </html>
    

    4.4 圆角边框

    div标签画一个圆
    <div style="width:100px;height: 100px;border: 10px solid red; border-radius: 100px"></div>
    ```html
    <!DOCTYPE html>
















### 4.5 阴影
`box-shadow: 10px 10px 100px green;`:设置阴影,x方向,y方向,阴影宽度,阴影颜色
`#price{ text-shadow: 5px 5px 5px darkgray; } `:水平偏移x、垂直偏移y、模糊半径、及其阴影颜色
```html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px green;
        }
    </style>
</head>
<body>
<div></div>

</body>
</html>

5、浮动

6、定位

7、网页动画(特效效果)

点击跳转继续学习:走进CSS—II

相关文章
|
2月前
|
前端开发
CSS实现闪亮效果
CSS实现闪亮效果
32 2
|
3月前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
32 2
|
3月前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
27 2
|
3月前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
27 2
|
6月前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
79 5
|
6月前
|
前端开发 JavaScript 搜索推荐
走进CSS—II
走进CSS—II
|
前端开发
前端知识大全之CSS(上)
CSS是前端的一个重要的组成部分,可以给HTML这个进行化妆起到美化的作用。
76 0
前端知识大全之CSS(上)
|
前端开发 容器
CSS奇思妙想 -- 使用 CSS 创造艺术
CSS奇思妙想 -- 使用 CSS 创造艺术
168 0
CSS奇思妙想 -- 使用 CSS 创造艺术
|
设计模式 前端开发 JavaScript
现代CSS进化史
现代CSS进化史
208 0
|
前端开发 程序员
CSS边玩边学,这五个游戏让你对CSS的掌握更进一步!
大帅最近都在研究如何让Web前端学习更加有趣,对新人更加友好,而游戏化(Gamification)是我未来也想要深入的一个重要方向。为此我做了一些调研,发现有不少优秀的玩中学的游戏化内容做得很赞,每一个我都打通关了,此文给大家做一个分享。
376 0
CSS边玩边学,这五个游戏让你对CSS的掌握更进一步!