CSS基础

最新推荐文章于 2024-08-24 13:47:49 发布

lilshork

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量240

点赞数

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

本文链接：https://blog.csdn.net/lilshork/article/details/127054620

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS简介

定义

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。样式定义如何显示HTML元素，样式通常存储在样式表中。

作用

给页面中的HTML标签设置样式。

CSS的三种引入方式

行内样式

 <!-- 
        1.行内样式------写在标签的style属性中
    --> 
    <h1 style="color:red ; font-size: 50px ;">标题</h1>
    <h1>标题</h1>
    <h1>标题</h1>

内嵌样式

<!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>Document</title>
    <!-- 
        2.内部（内嵌样式）
     -->
    <style>
        h1{
            color: #f00;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
</body>
</html>

外联样式

<link rel="stylesheet" href="../css/reset.css">

<link rel="stylesheet" href="../css/index.css">

css的基本选择器

标签选择器

（1）html标签名称{样式属性}

（2）对同类标签有效

/*
         标签选择器
         div {
         color: #f00;
         font-size: 60px;
         font-weight: bold;
     } 
     */

类选择器

（1）.类名称{样式属性}

（2）对类名一致的标签元素有效

/*
         类选择器 
         .title {
         color: #f00;
         font-size: 60px;
         font-weight: bold;
     } 
     */

id选择器

（1）#id名称{样式属性}

（2）对指定的id名称的标签元素有效

/* id选择器 */
     #title {
         color: #f00;
         font-size: 60px;
         font-weight: bold;
         text-align: center;
     }

通用选择器

（1）*{样式属性}

（2）对当前页面中所有标签元素有效

权重优先级

由上到下，由外到内。优先级从低到高（就近原则）。

css的复合选择器

后代选择器

/* 后代选择器 */
   ul li {
       color: #f00;
   }

子代选择器

 /* 
         子代选择器----直接子元素 
         .list>li {
            border: 1px solid #f00;
         }
         */

并集选择器

/* 并集选择器----对使用当前css样式的所有选择器有效 */
         .list>li,
         p{
            border: 1px solid #f00;
         }

hover伪类选择器

 /* 
         :hover伪类选择器 
        .list li:hover {
            background-color: blue;
            font-size: 20px;
        }
        */

css的文本属性样式

字体颜色color

三种表示字体颜色的方法

①16进制表示方法；

②英文单词；

③rgb三原色。

字体大小font-size

①绝对像素单位px；

②相对单位em----相对父元素变化；

③相对rem----相对于html根标签变化。

lilshork

关注

0
点赞
踩
0

收藏

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

CSS基础
复制链接

扫一扫

专栏目录