1. 背景

背景指的是元素内容、内边距和边界下层的区域
(可用background-clip修改)

  • background-color  背景色
  • background-image  背景图片(url)
  • background-repeat  背景重复
    • repeat  在水平垂直方向上都平铺
    • repeat-x / repeat-y  只在水平/垂直方向上重复
    • no-repeat  不允许图像在任何方向上平铺
  • background-position  背景定位
    • top、bottom、left、right 和 center(可以一水平一垂直成对出现,只出现一个默认center)
    • 长度值,如 100px 或 5cm(只应用于元素,偏移点是图像的左上角) 先水平再垂直
    • 百分数值(百分数值同时应用于元素和图像,左上角为0% 0%)
  • background-attachment  相对于可视区是固定的(fixed)/默认值滚动(scroll)

2. 边框

样式

solid、dotted、dashed、double、groove、ridge、inset、outset、none、inherit

实线上边框、点线右边框、虚线下边框和一个双线左边框:

border-style: solid dotted dashed double;    //top-right-bottom-left 的顺序

宽度

border-width:指定长度值,比如 2px 或 0.1em/3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick

"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。

颜色

border-color

可以所有边框属性在一个声明中:border: medium double rgb(250,0,255);

3. 列表

要修改用于列表项的标志类型,可以使用属性 list-style-type

想对各标志使用一个图像,这可以利用 list-style-image 属性(url)

4. 链接

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

次序规则:

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

5. 选择器

选择器的分组与继承

分组:逗号隔开

继承:特殊规则就可以摆脱继承

派生选择器

通过依据元素在其位置的上下文关系来定义样式(上下文选择器)

伪类选择器

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

两者区别在于: 伪类的效果可以通过添加一个实际的来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到

用于选择处于特定状态的元素,例如,它们是其类型的第一个元素,或者它们被鼠标指针悬停。(因为行为被定义为一个类)

1. 简单伪类

  • :last-child

  • :only-child

  • :invalid

  • :first-child

2. 用户操作伪类

  • :hover - 上文提到的; 仅当用户将指针移动到元素(通常是链接)上时才适用。
  • :focus - 仅在用户使用键盘控件聚焦元素时适用。

伪元素:::before和::after伪元素与content属性一起使用称为“生成的内容”

组合

1. 后代组合器 有共同的祖先(直接空格)

2. 子组合器 第一个选择器的直接子元素(用>连接) //比如选择的是ul>li 那么ul-span-li就不能算了

3. 相邻同级组合器 与第一个选择器同级的第一个选择器2元素(用+连接)

4. 通用同级组合器 与第一个选择器同级的所有选择器2元素(用~连接)

6. 选择器的优先级

层叠

①按特殊性排序,特殊性高的优先
②按出现顺序排序,越后出现的权重就越大。
③!important总是优先于其他规则

特殊性:

内联样式1000;

ID属性100;

类属性/属性选择/伪类010;

元素/伪元素001

通用选择(*),组合子(+>~,'“),以及否定伪类(:not)对特异性没有影响。

继承控制:

inherit将应用于选定元素的属性值设置为其父元素的属性值。实际上,这“继承”。

initial将应用于选定元素的属性值设置为该属性的初始值。

unset将属性重置为其自然值,这意味着,如果该属性是自然继承的,则其行为类似于inherit,否则,其行为类似于initial

重置所有属性值: all: unset;

【百度前端学院 Day4】背景边框列表链接和更复杂的选择器的更多相关文章

  1. Day4前端学习之路——背景边框列表链接和更复杂的选择器

    课程目标 掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性 主要内容: 背景属性 边框 列表 链接 其他选择器 选择器概览:https://www.w3school.com. ...

  2. 百度前端学院js课堂作业合集+分析(更新中...)

    第一课:简陋的登录框 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. 百度前端学院-基础学院-第20到21天之setTimeOut与setInterval

    setTimeout()可以使用clearTimeout()关闭 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 注意:setInterv ...

  4. 百度前端学院-基础学院-第七天到第八天之BFC

    1.BFC简介 BFC全称"block formatting context",中文为“块级格式化上下文”.特征总之记住一句话: BFC元素特征表现原则就是:内部元素无论怎么翻江倒 ...

  5. 百度前端学院task33源码及总结——听指令的小方块

    任务描述 如图,实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框 在输入框中允许输入如下指令,按下按钮 ...

  6. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  7. 百度前端技术学院(IFE)2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  8. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  9. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

随机推荐

  1. Reids的面试题

    1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...

  2. 1417. 重新格式化字符串--来源:力扣(LeetCode)

    题目描述: 给你一个混合了数字和字母的字符串 s,其中的字母均为小写英文字母. 请你将该字符串重新格式化,使得任意两个相邻字符的类型都不同.也就是说,字母后面应该跟着数字,而数字后面应该跟着字母. 请 ...

  3. #442-Find All Duplicates in an Array-数组中重复的数字

    一.题目 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O(n)时间复杂度内解 ...

  4. PHP目录操作函数汇总

    一.判断普通文件和目录    1.is_file()//判断给定文件名是否为一个正常的文件    2.is_dir()//判断给定文件名是否是一个目录二.文件的属性    1.file_exists( ...

  5. PHP文件目录操作

    目录操作 is_dir ( $path ) 判断当前路径是否为目录 ,返回布尔 opendir ( $path ) 打开路径目录,返回资源 readdir ( $handle ) 读取当前打开目录下一 ...

  6. excel导入mysql数据

    excel加载mysql数据 1.第一步,选择从mysql导入数据 2.单击会出现弹框: 3.可能有的同学的,这里缺少插件,例如: 4.去下载 这个 插件安装即可.https://dev.mysql. ...

  7. 在 Linux 系统中如何管理 systemd 服务

    在上一篇文章<Linux的运行等级与目标>中,我介绍过 Linux 用 systemd 来取代 init 作为系统的初始化进程.尽管这一改变引来了很多争议,但大多数发行版,包括 RedHa ...

  8. [JavaWeb基础] 017.Struts2 和 ajax交互简介

    在网页开发中,我们为了只对网页的某块内容进行实时更新,而不对其他不需要更新的内容进行刷新,从而提高响应速度和节省流量,我们采用了页面的异步刷新技术Ajax,那么我们的Struts2框架在这一方面是如何 ...

  9. pandas如何逐行需改DataFrame

    逐行修改DataFrame而不会报SettingwithCopyWarning警告的方法: df.iloc[行数,df.columns.get_loc(列名)]=new_value 参考:https: ...

  10. 深入理解JS:var、let、const的异同

    目录 序言 var 与 let 的区别 作用域 重复声明 绑定全局对象 变量提升与暂存死区 let 与 const 异同 参考 1.序言 var.let 和 const 都是 JavaScript 中 ...