关于css的一些总结

对于css的总结:

css是前端的样式层,可以利用一些样式技术,美化页面或者进行网页布局,根据style的书写位置可以分为:

  1. ·行内样式,
  2. 内嵌样式
  3. 外链样式

行内样式:主要是写在开始标签的<>里面,添加一个style的属性。style具有属性值

Style属性的属性值写法:

样式属性名字:样式属性:属性值。

 

内嵌样式:使用style标签,并写在head标签里面。

书写规则:

  1. 内嵌样式需要书写在style标签里面。而且style标签一般放置在head标签内部。
  2. Style的type属性可有可无。属性值为:text/css。
  3. 要通过选择器:列如:p{}。选择将来要添加的样式的标签。
  4. 选择器后面要紧随大括号。不是小括号,也不是中括号。
  5. 在大括号里面添加样式。(对于换行不敏感。)
  6. 每一个样式结束之后,在后面别忘记加分号。
  7. 语法格式:

       样式的名字:样式的属性值;。

     

css比较重要的部分便是选择器了

选择器分为:标签选择器  类选择器  id选择器以及通配符选择器。

标签选择器:顾名思义就是直接选中标签。列如:

//直接选中p标签,并添加样式
p{
color:red
}

类选择器:是通过给标签添加一个class属性,然后通过这个属性间接选中元素,从而给元素添加样式。如:

<head>
  <style>
     .box{
        background:blue
     }
  </style>
</head>

<body>
<div class="box"></div>
</body>

id选择器:和类选择器类似,也是通过给标签添加属性,从而间接的选中元素,这个属性叫id 。 如:

<head>
  <style>
     .box{
        background:blue
     }
  </style>
</head>

<body>
<div class="box"></div>
</body>

通配符选择器:一般用来初始化样式。默认的选择所有的元素。使用方法如下:


<head>
  <style>
   //通配符选择器使用 *,来设置初始样式
   //一般情况下清除外边距和内边距
     *{
        margin:0;
        padding:0;
     }
  </style>
</head>

<body>
<div class="box"></div>
</body>

 

css具有两大特性:

  1. 继承性
  2. 层叠性

继承性

Extend(延伸)

继承性:

有时候,我们法仙没有被选择器选中的标签,也添加上了样式。由于这个标签的祖先元素添加了样式。导致这个没有被选择器选中的标签也继承了样式。

注意:祖先元素的文字相关的样式,可以被后代元素所继承。

层叠性

如果网页中标签同时被多个选择器选中,添加相同样式,其实CSS会通过一些手段进行对比,将最后一个选择器层叠掉,覆盖其他选择器。

在CSS中权重高的选择器会层叠掉权重低的选择器。

基础选择器:根据选择器选择的范围大小划分权重,选择器选择范围越小,权重越高。

Id选择器>类选择器>标签选择器>通配符选择器。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值