【百度前端学院学习笔记】Day4 CSS基础II

最新推荐文章于 2022-10-01 11:19:45 发布

JohnKeatinghhh

最新推荐文章于 2022-10-01 11:19:45 发布

阅读量216

点赞数

分类专栏： HTML/CSS学习笔记文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_41604040/article/details/107298876

版权

HTML/CSS学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

【百度前端学院学习笔记】Day4 CSS基础II

一、background 背景
二、border 边框
三、lists 列表
四、链接样式
五、选择器进阶

一、background 背景

background属性适用于所有元素，包括行内元素(如span)和块元素(如div)。

需要注意的是，background不继承，祖先元素的background属性不影响后代元素的属性。

MDN关于背景的文档
在这里插入图片描述

background-color: black;

背景颜色属性和之前的文字颜色设置一样，有三种表示方法：颜色名称、RGB、颜色16进制代码。

background-image: url(balloons.jpg);

除了设置背景颜色，还可以设置背景图片，如：
在这里插入图片描述

.a {
  background-image: url(balloons.jpg);
}

.b {
  background-image: url(star.png);
}

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

这里有个值得注意的点：如果同时设置了background-color和background-image，那么background-image将会呈现在颜色的上层。

.b {
  background-image: url(star.png);
  background-color: #567895;
}

在这里插入图片描述

background-repeat: no-repeat;

可选的属性有no-repeat,repeat,repeat-x和repeat-y

background-size: contain;

固定大小：
background-size: 100px 10em;
在这里插入图片描述
可以看到指定大小之后图片产生了变形，因为同时强制指定了x和y的大小。

图片完整地被包含，当前元素可能会有留白：
background-size: contain;
在这里插入图片描述
可以看到，图片完整地被显示，但是div有留白。

完全覆盖当前元素：
在这里插入图片描述
图片填满了整个div，但是图片由于放大没有显示全，下面的建筑都看不到了。

background-position(0,0)

输入数字/百分比：
background-position: 0px 0px;
表示背景（图片）的左上角距离当前元素的左边界和上顶部的距离，中间用空格隔开

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

输入位置：
位置有：left/right/top/bottom/center
例如：
background-position:50px top
自定义坐标：
background-position: top 20px right 10px;
表示距离顶部20px，距离有边界10px。

background-image: linear-gradient

在这里插入图片描述

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

.b {
  background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  background-size: 100px 50px;
}

可以在CSS Gradient这个网站生成想要的渐变效果，再复制代码。

Multiple background images

对于多个背景图片/渐变，属性的设置如下：

background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

参数和图片一一对应，若参数数量小于图片数量，则参数按照循环的方式自动补齐，如这里会自动补齐成background-repeat: no-repeat, repeat-x, repeat,no-repeat;以及background-position: 10px 20px, top right;10px 20px, top right
多个图片的覆盖关系是：图片栈，后定义的优先显示在上层。

Background attachment

背景图片的滚动属性：

scroll: 假设图片是一个div的背景，那么在div这个元素内部用鼠标滚轮滚动时图片不会滚动，而当网页滚动时背景图片会一同滚动。
fixed： 图片不会滚动。
local： 当在元素内部滚动时，图片液会一起滚动。
可以去这个网站体验一下滚动效果：
background-attachment.html
注意，要把浏览器压得很扁才能看到scroll和fixed的区别

background同时设置多个背景和属性

在这里插入图片描述

.box {
  background:   
    linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, 
    orange;
}

有两个语法上需要注意的点：

不同背景用逗号隔开，background-color必须出现在最后一个；
background-size只能出现在background-position后面；

Accessibility considerations with backgrounds

在设置背景的时候，需要考虑背景图片加载不出来时，文字信息等不会因为颜色的原因看不清。（比如黑色调的背景图片，用白色问题，如果图片挂了那文字也看不清了）

二、border 边框

MDN关于边框的文档
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none，可以点击查看效果。
在这里插入图片描述
设置边框的基本语法：
可以在一行表示边框的所有属性：

.box { 
  border: 1px solid black;  /* 一行表示边框 粗细 类型 和 颜色*/
}

也可以分开写：

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
}

设置边框需要注意的点：

一定要指定边框样式，否则边框默认样式为none，即没有边框。
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

三、lists 列表

W3School列表样式概述
 MDN关于列表样式的文档
在这里插入图片描述
样式简写：

li {list-style : url(example.gif) square inside}

样式分开表示：

ul {list-style-type : square}
ul li {list-style-image : url(xxx.gif)}

四、链接样式

W3School关于链接的概述
 MDN关于链接的文档
链接样式主要描述链接的五个状态下，所对应的不同样式：
在这里插入图片描述

五、选择器进阶

伪类(pseudo-class)和伪元素(pseudo-element)：

MDN关于伪类(pseudo-class)和伪元素(pseudo-element)的文档

伪类： 依照我现在粗浅的理解，伪类是表示那些已经存在的元素（行内元素、块元素），没有给它们单独设类（太麻烦或需要定义的类是动态的），因此凭借它们固有的特性来选择它们，就好像给他们设了一个 “类” 一样。
例如： 下面这个css选择了<article>中所有p元素中的第一个元素（第一个元素随着内容增删随时会变，所以是动态的，无法手动设类）：

article p:first-child {
    font-size: 120%;
    font-weight: bold;
}

除了first-child之外，还有其他一些常用伪类：
在这里插入图片描述
再比如，<a>标签有物种状态：
Link、Visited、Hover、Focus、Active，这五个都是伪类。

伪元素： 伪元素表示的是那些 不存在 的元素，没有给它们设置一个元素（太麻烦或需要定义的元素是动态的），因此凭借它们固有的特性来选择它们，就好像把他们单独划了一个 “元素” 一样。
比如：下面这个css选择了p元素中的第一行（第一行随着文本增删随时会变，所以是动态的，无法手动设元素）：

article p::first-line {
   font-size: 120%;
   font-weight: bold;
}

关系选择器

后代选择器： 空格

.box p {
   color: red;
}

子代关系选择器： > 和后代的区别在于，只能是儿子，不能是孙子，曾孙子，曾曾孙子…

ul > li {
   border-top: 5px solid red;
}

邻接兄弟 : +

h1 + p {
   font-weight: bold;
   background-color: #333;
   color: #fff;
   padding: .5em;
}

所有兄弟 : ~ 与邻接兄弟的区别在于：不需要相邻

h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: .5em;
}

继承

MDN关于继承的文档

哪些元素会被继承？
举一个例子，如果你设置一个元素的 color和 font-family，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。
一些属性是不能继承的——举个例子如果你在一个元素上设置 width 50%，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了! widths,margins, padding, 和 borders都不能继承。某则排版就乱套了。
能否继承大部分是靠常识判断的。
如何手动设置继承？
继承有三个可以设定的值：inherit,initial,unset
inherit：强制开启继承；
intial：强制让属性和浏览器默认属性一样；
unset：不强制设置，如果该属性自然继承的就是inherit，否则是initial。
revert：兼容性不好…
设置所有值all为inherit, initial, unset, or revert。

div{
 background-color: red;
 color: blue;
 border: 2px solid green;
 padding: 10px;

}
.fix-this {
all:initial;
}

<div>
     <blockquote class="fix-this">
         <p>This blockquote is not styled</p>
     </blockquote>
</div>

当设置fix-this类的all时，如果设置成initial，则：字体，颜色，边框等一切属性都是默认的
在这里插入图片描述
当设置fix-this类的all时，如果设置成inherit，则：字体，颜色，边框，padding等一切属性都是继承的的

当设置fix-this类的all时，如果设置成unset，则：字体，颜色等继承，边框，padding等属性都是不继承的
在这里插入图片描述

优先级

MDN关于继承的文档
一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：
在这里插入图片描述
例如以下几个案例，它们的得分分别为：

在计算优先级的时候，先看高位，高位相当再看低位。

【注意】：在进行计算时不允许进行进位，例如，20 个类选择器仅仅意味着 20 个十位，而不能视为两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。

霸道的!important

有一个特殊的 CSS 可以用来覆盖所有上面所有优先级计算，不过需要很小心的使用 — !important。用于修改特定属性的值，能够覆盖普通规则的层叠。
例子：

#winning {
 background-color: red;
 border: 1px solid black;
}
 
.better {
 background-color: gray;
 border: none !important;
}
 
p {
 background-color: blue;
 color: white;
 padding: 5px;
}

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

如果没有.better里的border:none !important，应该长这样：

在这里插入图片描述
但是这里的!important无视了类选择器.better优先级低于ID选择器#winning的规则，直接将.better里的border:none !important的优先级提到最高，因此实际情况应该长这样：

【注意】： 覆盖 !important唯一的办法就是另一个 !important具有相同优先级而且顺序靠后，或者更高优先级。
了解 !important是为了在阅读别人代码的时候知道有什么作用。但是，强烈建议除了非常情况不要使用它。!important改变了层叠的常规工作方式，它会使调试 CSS 问题非常困难，特别是在大型样式表中。这就像C语言里的goto 一样，任何情况下都不建议使用，因为它使得程序的控制流难以跟踪，使程序难以理解和难以修改。