CSS基础-01选择器和样式（id选择器、class选择器、内联样式、内部样式表、外部样式表、多重样式优先级）

前端笔记 duan 2023-07-03 01:01 3889 0

CSS基础-01选择器和样式（id选择器、class选择器、内联样式、内部样式表、外部样式表、多重样式优先级）


1. 选择器

1.1 id 选择器

语法

用 "#标签名" 定义

  • 示例

  • <!DOCTYPE html><html><head><meta charset="utf-8"> <title>蜀</title> <style>#para1{
    text-align:center;
    color:red;} </style></head><body><p id="para1">受id选择器影响</p><p>不受选择器影响</p></body></html>

  • 显示结果


1.2 class 选择器

  • 语法

用 "元素.标签名" 定义
如：p.class1
不写元素表示所有

  • 代码

  • <!DOCTYPE html><html><head><meta charset="utf-8"> <title>CROW-SONG</title> <style>.center{
    text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>

2. 样式

2.1 内联样式

  • 作用

当个别元素需要使用特殊样式时

  • 方法

在相关标签中加入样式属性。

  • 示例

  • <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>蜀</title> </head><body style="background-color:red;"><h2 style="background-color:yellow;color:blue">黄底蓝字的标题</h2><p style="background-color:green;">绿底黑字的段落</p></body></html

  • 2.2 内部样式表

  • 语法

在head中定义CSS表

  • 示例

  • <!DOCTYPE html><html><head> <style type="text/css">
    body {background-color:yellow;}
    p {color:blue;}</style><meta charset="utf-8"> <title>蜀</title> </head><body>
    <h1 style="text-align:center;">标题</h1>
    <p>段落内容和body是head中style定义的</p></body></html>

  • 输出




2.3 外部样式表

指定外部文件定义CSS表

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

说明：

  • rel 是链接的类型，此处说明是 style sheet

  • type 是外联文件的类型

  • href 是外联文件的位置

2.4 多重样式优先级

如果一个元素有几个样式则
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式


热门文章

最近发表

文章归档

标签列表