CSS复习

使用css理由:是为了实现内容与样式的分离。

css特性:

  1. 内容与表现分离
  2. 网页的表现统一,容易修改
  3. 丰富的样式,使得页面布局更加灵活
  4. 减少网页的代码量,增加网页的浏览速度,节省网络带宽
  5. 运用独立于页面的CSS,有利于网页被搜索引擎收录
  6. 由浏览器解释运行
  7. 不区分大小写

css基本语法:

选择器 {
    样式声明;
    样式声明;
    ... ...
}

<style type="text/css">
    /* p是html选择器,表示给所有的p标签设置样式 */
    p {
        color:red;
        font-size:24px;
    }
</style>

css基本选择器

标签选择器  标签{}

<style>
    p {
        color:red;
        font-size:24px;
    }
</style>

类选择器 .class类名{} 同一页面可用多次

<style>
    .one {
        color:red;
        font-size:24px;
    }
</style>
<p class="one">这是一个p标签</p>

id选择器  #id名{}  同一页面只能用一次

<style>
    #first {
        color:red;
        font-size:24px;
    }
</style>
<!-- 在一个页面中,id属性的值必须唯一 -->
<p id="first">这是一个p标签</p>

层次选择器

后代选择器 div p {} 

div与p是父子关系 选择所有被div包裹的p元素

子选择器 div>p{}

只选择第一代子元素,离div最近那层的p受影响

群组选择器 html,body{}

用逗号连接,声明风格相同

伪类选择器 

:fistt-of-type

选择一组子元素中的第一个

:last-of-type

选择一组子元素中的最后一个

:nth-of-type(1)

使用索引来选择某一个子元素

css引入方式:

        行内:只对本行有效。

<p style="font-family:华文行楷;color:green;font-size:32px">这是一个行内样式</p>

        内嵌:只对本页面有效。

<style>
    div > p {
        color:red;
        font-size:24px;
    }
</style>

        外部:导入css文件

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

CSS优先级:

基本规则

引用方面:行内样式 > 内嵌样式/外部样式

选择器方面:ID 选择器 > 类选择器(属性选择器、伪类选择器) > 标签选择器

样式叠加的优先级

就近原则:距离最近的样式有效

顺序原则:最后书写的样式有效

精细原则:指向越精细越优先

CSS继承

CSS继承规则:

  1. 子标签可以继承父标签的样式风格
  2. 子标签的样式不会影响父标签的样式风格
  3. 一般只有文字文本具有继承特性,如文字大小、文字加粗、文字颜色、字体等。

CSS颜色

主要有以下两种:

  1. 使用英文单词作为颜色值:如:red、green、blue、black、white、yellow ......
  2. 使用十六进制的颜色值:如:#000000 #FFFFFF #45F87E
    (其中前两位表示红色,中间两位表示绿色,最后两位表示蓝色。也可以使用简写:#FF0088 -> #F08)
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lsky985

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值