css基础知识

最新推荐文章于 2023-03-11 18:29:18 发布

王十分

最新推荐文章于 2023-03-11 18:29:18 发布

阅读量197

点赞数 2

本文链接：https://blog.csdn.net/weixin_50266519/article/details/111870631

版权

奉天承运，博主诏曰：

CSS的概念

Cascading Style Sheet 级联样式表，表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。

style标签和css基本语法结构展示

<style type="text/css">
h1 {
 font-size:12px;
 color:#F00;
}
</style>

行内样式

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css行内样式</title>
    </head>
    <body>
        <ul>
            <li style="color: red;font-size: 20px;">锄禾日当午</li>
            <li>汗滴禾下土</li>
            <li>随之盘中餐</li>
            <li>粒粒皆辛苦</li>
        </ul>
    </body>
</html>

运行结果：

在这里插入图片描述

内部样式表

代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css行内样式</title>
  	<style type="text/css">
   		li{
  		  color: red;
		  font-size: 20px;
  		 }
  </style>
    </head>
    <body>
        <ul>
            <li>锄禾日当午</li>
            <li>汗滴禾下土</li>
            <li>随之盘中餐</li>
            <li>粒粒皆辛苦</li>
        </ul>
    </body>
</html>

运行结果：

在这里插入图片描述

外部样式表

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css行内样式</title>
  	<link rel="stylesheet" type="text/css" href="css/1.css"/>
    </head>
    <body>
        <ul>
            <li>锄禾日当午</li>
            <li>汗滴禾下土</li>
            <li>随之盘中餐</li>
            <li>粒粒皆辛苦</li>
        </ul>
    </body>
</html>

运行结果

在这里插入图片描述

css级联样式表：

写在标签内部属性style中，优先级最高
内部样式：style标签内部（head中）
外部样式：写在外部的css文件中

内部样式和外部样式优先级：

1、如果有相同标签，更靠近中html代码的优先级更高
2、如果没有相同标签，内层标签的样式优先级更高

加载标签中的是标签选择器

类选择器

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css行内样式</title>
  <style type="text/css">
   .aa{
    color: red;
    font-size: 20px;
   }
  </style>
    </head>
    <body>
        <ul>
            <li class="aa">锄禾日当午</li>
            <li>汗滴禾下土</li>
            <li>随之盘中餐</li>
            <li>粒粒皆辛苦</li>
        </ul>
    </body>
</html>

运行结果：

在这里插入图片描述

id选择器

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css行内样式</title>
  <style type="text/css">
   .aa{
    color: red;
    font-size: 20px;
   }
   #bb{
    color: green;
    font-size: 10px;
   }
  </style>
    </head>
    <body>
        <ul>
            <li class="aa">锄禾日当午</li>
            <li id="bb">汗滴禾下土</li>
            <li>随之盘中餐</li>
            <li class="aa">粒粒皆辛苦</li>
        </ul>
    </body>
</html>

运行结果：

在这里插入图片描述

区别：

类选择器可以有多个，ID选择器是唯一的。

钦此。

王十分

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css基础知识

CSS的概念Cascading Style Sheet 级联样式表表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定<style type="text/css">h1 { font-size:12px; color:#F00;}</style>...
复制链接

扫一扫