css的基本知识

css简介

网页分成三个部分

结构

表现 :外在显示的样子

行为

css-层叠样式表

网页实际上是一个多层结构,通过css可以分别为网页的每一层来设置样式,最终我们看到的是最上面的一层

css学习

先找到元素,再去设置样式

css书写的位置

第一种、行内式写法

<p style="color:red; font-size: 30px;">p中的文字</p>
<span class="one" style="color:red; font-size:30px">span1</span>
  • 代码可维护极差,css代码与html结构没有实现分离
  • 影响的范围只有当前标签

第二种 、内嵌式写法

<head>
    <style type="text/css">
    选择器 {
        属性1:属性值1;
        属性2:属性值2;
        属性3:属性值3;
    }
    </style>
</head>
  • 代码可维护性较差,没有实现css代码与html结构的完全分离
  • 影响的范围只有当前页面

第三种 、外联式

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="1.css">
</head>
  • 代码可维护性高,css与html结构完全分离
  • 影响范围广,当前整个网页站点

 css语法规范

语法:选择器 声明块

选择器:通过选择器来选中页面中指定的元素,p就是选中页面中所有的p元素

声明块:声明块是紧跟在选择器后面的,使用{}括起来

通过声明块给指定的元素设置样式

语法:样式名:样式值;

这叫名值对 ,一组一组,可以多组 用;隔开

p {
        color: red;
        background-color: salmon;
      }

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值