CSS基础

最新推荐文章于 2023-12-26 10:46:46 发布

燃烧i你的梦

最新推荐文章于 2023-12-26 10:46:46 发布

阅读量178

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/rsnmd/article/details/106128265

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文全面解析CSS，涵盖基础知识、发展史及应用技巧。介绍如何通过三种导入方式使用CSS，详解各类选择器的功能与用法，包括标签、类、ID选择器及层次、结构伪类和属性选择器。并提供字体、文本样式的调整方法，助您掌握网页美化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

1.什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）对HTML的扩展美化你用HTML写出的网页使其变得更好看

字体，颜色，布局，

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS，提出了HTML与CSS结构分离的思想写网页变得简单

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性

1.3 快速入门

style (样式) 选择器

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在 style里面编写CSS 代码
    CSS语法：
    选择器{
    声明1:
    声明2：
    每一个声明用:结尾

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


<body>
<h1>辛晶木皮</h1>
</body>
</html>

CSS的优势

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于HTML的CSS文件

5、利用SEO，容易被搜索引擎收录！

2.CSS如何使用

2.1三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<!--外部样式-->  从外部导入CSS代码 使用link 标签
<link rel="stylesheet" href="css1.css"> 

<body>
<!--行内样式，在标签元素中 增加一个style样式 -->
<h1 style="color:darkmagenta">辛晶木皮</h1>
<!--优先级：就近原则-->
</body>
</html>

3.CSS选择器

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

3.1 基本选择器

3.1.1 标签选择器

选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器  会选择到 页面上所有这个标签的元素-->
    <style>
        h1{
            color: #ffa4d0;
        }
        p {
            font-size:  80px;
        }
    </style>
</head>
<body>
<h1>JAVA</h1>
<h1>学JAVA当作兴趣</h1>
<p>看我的</p>

</body>
</html>

3.1.2 类选择器

选择类class 属性相同的的标签（跨标签选择）

通过 .class（类名）选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 类选择器的格式 .class 的名称*/
        .malei{
            color: blue;
          }
        .xjj{
            color: #ffa4d0;
        }
    </style>

</head>
<body>
<h1 class="malei">辛晶</h1>
<h1  class="xjj">马磊</h1>
<h1>标题3</h1>
</body>
</html>

3.1.3 id选择器

选择独一无二的id

通过 #id名{} 选择元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 的格式：
         #id 名称{}
         不遵循就近原则
         id选择器>class选择器＞ 其他选择器
         */
        #ee{
            color: aqua;
        }
        .mm{
            color: blue;
        }
    </style>
</head>
<body>
<h1 id="ee">马</h1>
<h1 class="mm"> 贾 </h1>
<h1>丁 </h1>
</body>
</html>

3.2层次选择器

3.2.1 后代选择器

1.后代选择器：某个元素的后面

/* 后代选择器*/
   body p {
       background: #ffa4d0;
   }

3.2.2 子选择器

2.子选择器：只有一代

/* 子选择器*/
body >p{
    background: aqua;
}

3.2.3 相邻选择器

3.相邻兄弟选择器同辈

/* 相邻兄弟选择器
.class + p :选择相邻下面的元素
*/
.ml + p{
    color: red;
}

3.2.4 通用选择器

4.通用选择器

/*通用选择器：当前选中元素的向下的所有兄弟元素 */
.ml ~ p{
    background: blue;
}

3.3 结构伪类选择器

伪类：条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用.class和id选择器-->
    <style>
        /* ul的第一个子元素*/
        ul li :first-child{
            background: red;
        }
         /* ul的最后一个元素*/
        ul li:last-child(1){
            background: blue;
        }

          p:nth-of-type(2){
              background: darkmagenta;
          }
    </style>
</head>
<body>
<h1>111</h1>
<p>p1</p>
<p class="ml">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p444</p>
    </li>
    <li>
        <p>p555</p>
    </li>
    <li>
        <p>p666</p>
    </li>
</ul>
</body>
</html>

3.4 属性选择器（常用、重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dddd a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #ffa4d0;
            color: red;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px  Arial;
        }
        /* 属性名，属性名=属性值（正则）*/
        /*选中存在id属性的元素           a[]{}
        a[id]{
            background: darkmagenta;
        } */
        a[id=xxxx]{
            background: green;
        }
        a[class="links item"]{
            background: yellow;
        }
        a[class*="links"]{
            background: brown;
        }
        /*需要注意的是：=是绝对等于这个属性 *=是包含*/
        /*  ^=  以这个开头*/
        a[href^=http]{
            color: green;
        }
        /* $= 以什么什么结尾 */
        a[href$=jpg]{
            background: cyan;
        }
    </style>
</head>
<body>
<p  class="dddd">
    <a href="http://www.bilibili.com"  class="links item" target="_blank">1</a>
    <a href="" class=" links active" target="_self">2</a>
    <a href="HTML/22.jpg" class="xxxx">3</a>
    <a href="HTML/33.jpg">4</a>
    <a href="HTML/44.jpg"class="xjjjj">5</a>
    <a href="ads"class="links itme">6</a>
    <a href="dadas" class="links tiem">7</a>
    <a href="dsada" id="xxxx">8</a>
    <a href="daa">9</a>
    <a href="dda">10</a>
</p>
</body>
</html>

类似于正则表达式的规则每个符号有不同的规则

= : 绝对等于

*=：包含

^= :以什么什么开头

$=:以什么什么结尾

4.美化网页元素

4.1 为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮、才能吸引用户

3、凸显页面主题

4、提高用户的体验

span 标签：重点突出的字

4.2 字体样式


    font-family:  设置字体
    font-size:字体大小 ;
    font-weight:字体粗细;
    color:字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
             /*设置字体*/
            font-family: 楷体;

        }
        h1{
            color: darkmagenta;
            /*字体大小 font-size*/
            font-size:50px ;
        }
        p{
            /*字体颜色和粗细*/
            color: #ffa4d0;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>
    辛晶晶
</h1>
<p>
    美丽动人 闭月羞花 花容月貌
</p>
</body>
</html>