CSS概述与基本语法

CSS概述

CSS是一种样式表语言,用于为HTML文档控制外观,定义布局。例如,CSS涉及字体颜色、边距、高度、背景图像、高级定位等方面。

CSS与HTML的关系,HTML是网页内容,CSS定义网页的样式

基本语法

行内样式表:

行内样式表是通过标签的属性来设置元素的样式,器基本语法格式如下:

<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名>

例如:

复制代码
<b style="color: aqua;">span是一个纯净版的行级标签</b>

结果:

内嵌样式表:

内嵌式是将css代码集中写在HTML文档的head头部标签中,并且用style标签定义

例如:

外部样式表:

外部样式表时将所有的央视放在一个或多个以CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件连接到HTML文档中。

例如:

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link href="../css/index.css" rel="stylesheet" > 
    </head>
    <body>
        <p>静夜思</p>
    </body>
</html>
样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 没有实现样式和结构分离 较少 控制一个标签(少)
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中)
外部样式表 完全实现结构和样式相分离 需要引入 最多强烈推荐 控制整个站点(多)

选择器

要使用CSS对HTML页面中的标签实现一对一,一对多的控制,这就需要用到CSS选择器

常用选择器:
  • 标签选择器:通过标签选择器可以选择页面中的所有指定标签【语法:标签名{}】

  • 类选择器:通过标签的class属性值选中一组标签【语法: .class属性值{}】

  • id选择器:通过标签的id属性值选中唯一的一个标签【语法: #id属性值{}】

  • 通配选择器:可以用来选中页面中所有的的标签【语法:*{}】

例如:

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        
        <style>
        
         /* 标签选择器 */
        p{
            color:red;
            font-size:40px;
        }
        /* id选择器 */
        #title{
            color:red;
            font-size:20px;
        }
        /* 类选择器 */
        .p1{
            color:green;
        }
        .p2{
            color:blue;
        }
        /* *通配选择器 选中所有的标签 */
        *{
            font-family: 楷体;
            }
             
        </style>
    </head>
    <body>
        <p>标签选择器(所有选择器)</p>
        <p id="title">id选择器(所有选择器,标签选择器)</p>
        <p class="p1">类选择器1(所有选择器,标签选择器)</p>
        <p class="p2">类选择器2(所有选择器,标签选择器)</p>
        
    </body>
</html>
相关推荐
EricWang135821 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning21 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人31 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3