CSS基础

简介: 这篇文章介绍了CSS的三种引入方式:内联定义、内部样式块和链入外部样式表,以及如何使用标签选择器、ID选择器和类选择器来设置HTML元素的样式。

Css

作用:用来修饰HTML页面,设置元素的样式,让html页面更加美观

一、引入css的三种方式

1、内联定义:在对象的标记内使用

语法格式:<标签 style=“样式名:样式值;样式名:样式值...”></标签>

2、定义内部样式快对象(在head标签中使用style块)

<head>
   <style type="text/css">
           选择器{
               样式名:样式值;
               样式名:样式值;
                    ...
           }

   </style>
</head>

3、链入外部样式表文件

语法格式:<link type="text/css" rel="stylesheet"  href="css文件的路径" />

二、id选择器 | 标签选择器 | 类选择器

1、标签选择器

语法格式
        标签名{
                  样式名:样式值;
                   样式名:样式值;
                       ...
        }

2、id选择器

语法格式
        #id{
                  样式名:样式值;
                   样式名:样式值;
                       ...
        }

3、类选择器

语法格式
        .类名{
                  样式名:样式值;
                   样式名:样式值;
                       ...
        }

引入外部文件的实例。

引入外部文件
css文件

a {
    text-decoration: none;
}

html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/my.css" type="text/css" />
    </head>

    <body>
        <a href="https://www.baidu.com">百度</a>
    </body>

</html>

结果
在这里插入图片描述

相关文章
|
3月前
|
Web App开发 前端开发 JavaScript
CSS基础
【8月更文挑战第27天】
18 3
|
3月前
|
前端开发 UED
css基础
css基础
13 0
|
6月前
|
前端开发
CSS基础 2(2)
CSS基础 2
31 2
|
6月前
|
前端开发 容器
CSS 基础 3
CSS 基础 3
29 1
|
6月前
|
Web App开发 XML 前端开发
CSS基础-超详解 (1)
CSS基础-超详解 (1)
32 0
|
6月前
|
前端开发 安全 容器
CSS基础 2(1)
CSS基础 2
22 0
|
6月前
|
前端开发 JavaScript 程序员
CSS【基础】
CSS【基础】
69 0
|
人工智能 前端开发 JavaScript
CSS基础(4)
为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示, 经常用于横向排列盒子。 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。
55 1
|
存储 人工智能 前端开发
CSS基础(3)
CSS 的三大特性 CSS有三个非常重要的三个特性:层叠性、继承性、优先级 网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子Box 。 利用 CSS 设置好盒子样式,然后摆放到相应位置。 往盒子里面装内容。 网页布局的核心本质:就是利用 CSS 摆盒子。
132 1
|
算法 前端开发
CSS基础之textstyle
CSS基础之textstyle
111 0
CSS基础之textstyle