第四章 初识css3

第四章 初识css3

1.style标签
html 复制代码
<style type="text/css">
    h1{
        font-size:12px;
        color:#F00;
    }
</style>
行内样式

使用style属性引入CSS样式

html 复制代码
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式表

CSS代码写在<head><style>标签中

html 复制代码
<style>
        h1{color: green; }
</style>
外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式

  1. 链接式
html 复制代码
<head>
  ......
<link href="style.css" rel="stylesheet" type="text/css" />
......                      rel使用外部样式表    type文件类型
</head>

​ 2.导入式

html 复制代码
<head>
......
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
css样式优先级
  • 就近原则
2.基本选择器
标签选择器
css 复制代码
p { font-size:16px;} 
类选择器
html 复制代码
<标签名 class= "类名称">标签内容</标签名>
css 复制代码
.class { font-size:16px;}
ID选择器
css 复制代码
#id { font-size:16px;}
交集选择器
并集选择器
基本选择器优先级(不遵循"就近原则")

ID选择器>类选择器>标签选择器

3.高级选择器
  • 层次选择器

  • 结构伪类选择器

  • 属性选择器

相关推荐
熊猫钓鱼>_>9 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
德福危险9 小时前
从盲打xss到到模板注入:unix靶机渗透之Tempus_fugit4
前端·unix·xss
JavaGuide9 小时前
又一个画图 Skill 开源,再见手动画 draw.io!
前端·后端·github
一只猫的梦9 小时前
AI 适配器架构
前端·chrome
谭光志10 小时前
AI 是怎么操作浏览器的——browser use 实现原理
前端·javascript·ai编程
weixin_4713830310 小时前
args,...args与Parameters<T>
开发语言·前端
一tiao咸鱼11 小时前
前端转 agent # 03 - Pydantic v2 数据校验深入
前端·后端
Cobyte11 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
前端H11 小时前
生成式 UI 实战:AI 如何重塑前端界面
前端·人工智能·ui
懂懂tty11 小时前
Web前端性能指标
前端