CSS基础

最新推荐文章于 2023-06-21 10:46:29 发布

符号丶

最新推荐文章于 2023-06-21 10:46:29 发布

阅读量273

点赞数

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/qq_35833753/article/details/76012903

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、CSS基本语法

<style type="text/css">
    选择器 {
        对象的属性1 : 属性值;
        对象的属性2 : 属性值;
    }
</style>

二、CSS基础选择器

标签选择器：作用于当前页面所有的指定标签

<style type="text/css">
        li {
            color: red;
        }
</style>

<ul>
    <li>理学院</li>
    <li>计算机学院</li>
    <li>外国语学院</li>
    <li>汽车学院</li>
    <li>机械学院</li>
    <li>管理学院</li>
    <li>通信学院</li>
</ul>

id选择器：作用于id为指定值的所有元素（同一页面内id不可重复）

<style type="text/css">
        #r {
            color: red;
        }
</style>
<ul>
    <li id="r">理学院</li>
    <li>计算机学院</li>
    <li>外国语学院</li>
    <li>汽车学院</li>
    <li>机械学院</li>
    <li>管理学院</li>
    <li>通信学院</li>
</ul>

类选择器：作用于class为指定值的所有元素

<style type="text/css">
        .c {
            color: red;
        }
</style>
<ul>
    <li class="c">理学院</li>
    <li>计算机学院</li>
    <li class="c">外国语学院</li>
    <li>汽车学院</li>
    <li class="c">机械学院</li>
    <li>管理学院</li>
    <li class="c">通信学院</li>
</ul>

三、关联样式

行内样式（内联样式）

<p style="color:red;">一个红色段落</p>

内部样式

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

外部样式

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

符号丶

关注

0
点赞
踩
0

收藏

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

一、CSS基本语法<style type="text/css"> 选择器 { 对象的属性1 : 属性值; 对象的属性2 : 属性值; }</style>二、CSS基础选择器标签选择器：作用于当前页面所有的指定标签<style type="text/css"> li { color: red;
复制链接

扫一扫