打码日常2day--html5+css3(css)_卡角的博客-程序员宅基地_html5内联样式

技术标签: css  html5+css3  

css3

css3编写的位置

1.内联样式(行内样式)

  • 在标签内通过style属性来设置元素的样式

  • 问题:
    只能对一个标签生效,如果要影响到多个元素,每一个都要复制一遍
    修改时要一个一个修改,不方便
    注意:开发时绝对不能用内联样式

<p style="color: cadetblue; font-size: 60px;">你好呀!</p>
<p style="color: cadetblue; font-size: 60px;">我很好!</p>

2.内部样式表

  • 将样式编写在head的style标签中

  • 通过css的选择器来选中元素并为其设置样式

  • 可以同时为多个标签设置样式,并且只用修改一个即可全部应用

<style>
     p{
        background: chocolate;
     }
</style>

3.外部样式表

  • 可以将css样式编写到一个外部的css文件中

  • 然后通过link标签来引入外部的css文件

  • 只要使用这个样式的网页都可以引用,可在不同网页复用

<link rel="stylesheet" href="./08_css语法.css">

css选择器

1.常用选择器

1.元素选择器

  • 作用:根据标签名来选中指定的元素

  • 语法:标签名{}

  • 例子:p{} h1{} div{}

    h1{
    	 background: chocolate;
    	}
    

2.id选择器

  • 作用:根据元素的id属性值选中一个元素

  • 语法:#id{}

  • 例子:#box{} #red{}

    #red{
    	  color: red;
    	  }
    

3.类选择器

  • 作用:根据元素的class属性选中一组元素

  • 语法:class属性值

  • class是一个标签的属性,它可以重复使用

  • 可以通过她给元素分组,也可以一个元素设置多个class

    .abc{
    	   height: 100px;
    	 }
    

2.复用选择器

1.交集选择器

  • 作用:选中同时复用多个条件的元素

  • 语法:选择器1.选择器2{}

  • 注意:交集选择器中有元素选择器,必须使用元素选择器开头

    div.red{
    	     color: red;
    	    }   
    

2.选择器分组(并集选择器)

  • 作用:同时选择多个选择器对应的元素

  • 语法:选择器1,选择器2{}

    h2,span{
    	      color: rosybrown;
    	     }
    

3.关系选择器

1.子元素选择器

  • 作用:父元素>子元素{}

    div>span{
            color: royalblue;
          }
    

2.后代元素选择器

  • 作用:选中指定元素内的指定后代元素

  • 语法:祖先 后代

div span{
      color: springgreen;
    }

3.选择下一个兄弟

  • 语法:前一个 + 下一个

    p + span{
         color: teal;
       }
    

4.伪类选择器

  • 伪类用来描述元素的特殊状态(第一个,被点击,鼠标移入)

    ​ 伪类一般情况下都是使用:开头

    ​ :first-child 第一个元素

    ​ :last-child 最后一个元素

    ​ :nth-child() 选择第n个元素

    ​ 特殊值:

    ​ n n的范围0到正无穷

    ​ 2n 表示选中偶数的位置

    ​ 2n+1 表示选中奇数的位置

    • 以上这些元素是根据所有元素进行排序

      ul>li:first-child{
            color: tomato;
          }
      ul>li:nth-child(2n){
            color: turquoise;
          }
      
  • :first-of-type

    :last-of-type

    :nth-of-type()

    • 这几个伪类的功能和上述的类似,不同点是它们在同类元素中进行排序

      ul>li:first-of-type{
            font-size: 50px;
          }
      
  • :not() 否伪元素

    • 将符合条件的伪元素从选择器中去除

      ul>li:not(:nth-child(3)){
            font-weight: 900;
          }
      

5.选择器练习

选择器餐厅练习

超链接的伪类

  • :link 用来表示没访问过的链接(正常的链接)

    a:link{
          color: tomato;
          font-size: 20px;
        }
    
  • :visited 用来表示访问过的元素

    • 由于隐私原因,visited这个伪类只能修改链接的颜色

      a:visited{
            color: yellow;
          }
      
  • :hover 表示鼠标移入的状态

    a:hover{
          color: crimson;
         }
    
  • :active 表示鼠标点击

 a:active{
        font-size: 50px;
      }

伪元素

  • 伪元素表示页面中一些特殊的并不存在的元素(特殊的位置)

    • 伪元素使用::开头

    • ::first-letter 表示第一个字母

    • ::first-line 表示第一行

    • ::selection 表示选中的内容

    • ::before 元素的开始

    • ::after 元素的结束

    ​ before和after必须接后content属性来使用

    p::first-letter{
          font-size: 50px;
        }
    p::first-line{
          color: crimson;
        }
    p::selection{
          background-color: cyan;
        }
    
    p::after{
          content: 'I am OK!';
          color: darkturquoise;
        }
    

样式的继承

  • 我们为一个元素设置样式的同时也会应用到它的后代元素上
  • 注意:并不是所有的样式都会被继承(背景相关的,布局相关的这些样式都不会被继承)

选择器的权重

  • 我们通过不同的选择器,选中相同的元素为它设置样式时,此时会发生冲突

  • 发生冲突时,应用那个样式又选择器的权重(优先级)决定

选择器的权重:
        内联选择器     1000
        id选择器       100
        类和伪类选择器   10
        元素选择器       1
        通配选择器       0
        继承的样式    没有优先级
  • 比较优先级的时候需要将所有优先级相加,最后优先级高先显示(分组优先级时单独计算的)

  • 选择器的累加不会超过最大数量级

  • 如果优先级计算相同时,使用靠下的样式

  • 可以在某个样式的后边添加!important,则此时有最高优先级,甚至高于内联样式

    注意:在开发中慎用

单位

  • 像素:

    • 屏幕实际又一个一个小点组成
    • 不同屏幕的显示大小不一样,像素越小效果越清晰
    • 同样200px在不同设备下显示效果也不一样
  • 百分比:

    • 可以将属性设置为相对其父元素属性的百分比
    • 设置百分比可以使子元素随父元素的改变而改变
  • em:

    • em是相当于父元素来计算的
    • 1em=1font-size
    • em会根据字体大小而改变
  • rem:

    • rem是相对于根元素的字体大小来计算
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42334405/article/details/111772769

智能推荐

【ostep】02 虚拟化 CPU - 进程_高厉害的博客-程序员宅基地

进程 (process)进程的抽象进程是一种最基本的抽象。进程的非正式定义非常简单:进程就 是运行中的程序。程序本身是没有生命周期的,它只是存在磁盘上面的一些指令(也可能 是一些静态数据)。是操作系统让这些字节运行起来,让程序发挥作用。操作系统决定何时令 CPU 运行何地的指令,通过不断地切换内存中不同程序的指令,类抽象出同时执行多个进程的错觉。可以很自然地联想到组原中的 IO 中断方式,他通过一种类似回调的方式,令 CPU 中断当前运行的程序,关中断,并将断点地址压栈,开中断,跳转至中断向量

jQuery中的事件与动画_m6_666666的博客-程序员宅基地

jQuery中的事件js中的事件:鼠标事件,键盘事件,window事件,表单事件基础事件 鼠标事件 click(),鼠标单击事件 mouseover(),鼠标指针移过时 mouseout(),鼠标指针移除时 mouseenter(),鼠标指针进入时 mouseleave(),鼠标指针移除时 键盘事件 keydown(),按下键盘时 keyup(),释放键盘时 keypress(),产生可打印的字符 获取当前按键的键值:keyCode,识别按下了哪个

计算机组成原理——计算机系统+信息处理与表示_Simplezk的博客-程序员宅基地

简单总结一下以前学过的一些基础课程的内容,真是时时看,时时忘(误一、计算机系统介绍1.处理器结构Von Neumann arch. &amp; Harvard arch.冯诺依曼体系结构: 一种将程序指令存储器和数据存储器合并在一起的存储器结构,该体系计算机由五大基本部件组成:存储器(Memory):用来保存和记录原始数据、程序和运算结果的部件运算器(ALU:执行算术、逻辑运算单元,一般大部分位于CPU中)控制器(Controller:发出控制指令部件)输入设备(Input device

(初识)UrlRewriteFilter的使用_a281246240的博客-程序员宅基地

UrlRewriteFilter是一个用于改写URL的Web过滤器,类似于Apache的mod_rewrite。适用于任何Web应用服务器(如Resin,Orion,Tomcat等)。其典型应用就把动态URL静态化,便于搜索引擎爬虫抓取你的动态网页。这样做就避免了url中出现?&之类的符号,而且页面伪静态化之后也增加了被搜索引擎找到的概率。开发步骤1,添加urlrewrite-

linux下打包QT程序_linux小牛的博客-程序员宅基地

你的程序要发布,打包一下,linux系统,QT程序打包。

opencv2.4.5正确调用SurfFeatureDetector,SiftFeatureDetector_greenapple_shan的博客-程序员宅基地

在以前版本中,surf和sift算法都是在头文件#include 中,但在新的opencv版本出来后,如果仍然使用这个头文件就会出现编译错误如下:     [cpp] view plaincopy1>  interestPoints.cpp  1>d:\visual studio 2010\exercises\opencv2\myinte

随便推点

Swap in C C++ C# Java_weixin_33941350的博客-程序员宅基地

写一个函数交换两个变量的值。C:错误的实现:void swap(int i, int j) { int t = i; i = j; j = t;}因为C语言的函数参数是以值来传递的(pass by value),参数传递时被copy了,所以函数中交换的是复制后的值。正确的实现:指针版:void swap(i...

影响账户安全的ODR是什么?kkgj66_跨境的小亚的博客-程序员宅基地

今天来Djr120506(小编自己)GET一下影响账户的九大指标之一Order Defect Rate(订单缺陷率)。一 定义与计算方法订单缺陷率,简称ODR,指卖家在相关时间内产生的1星或者2星的差评(Negative Feedback)和索赔(Claim)纠纷的订单在所有订单中的比例。计算方式如下:订单缺陷率=相关时间内产生的缺陷订单的总量/订单总数乘以100%。订单缺陷率计算时间:...

百度BAE java项目应用开始的准备工作_Vilochen_的博客-程序员宅基地

百度 BAE 不支持 Git 和 FTP ,也没有自己的上传工具,要想管理代码,只有使用“反人类”的SVN。官方关于SVN的教程十分详细,我就不再做重复劳动了,直接复制……从这里下载目前,无论是Windows平台、Linux平台还是Mac平台都有比较成熟的SVN客户端工具。windows下TortoiseSVN:立即下载Linux下RabbitVCS:立即下载Mac下svn

【博客335】什么是 “code review“_快乐学习~的博客-程序员宅基地_code review什么意思

内容: 记录实际生产环节中不可缺少的一个步骤:code reviewcode review:代码复查(Code Review),又叫“代码审查”,其基本思想就是,在开发人员编写完自己的代码后,由其他人来复查他写的代码,从而有效地发现代码中存在的缺陷。代码复查的一个基本理论就是,当我们越早发现代码存在的缺陷,我们解决缺陷的代价就越低。需要code review的原因:项目组普遍存在以下问题:1、任何项目组成员都不可避免地出现新手,他们往往是刚刚从大学毕业的学生。这些新手由于软件开发时间太

linux i686 x86_64,【linux-3.8来了】同步更新i686,x86_64版archlinux安装CD_weixin_39765695的博客-程序员宅基地

该楼层疑似违规已被系统折叠隐藏此楼查看此楼个人非官方定制版livecd上个月刚刚发布过:tieba.baidu.com/p/2130253607,这里就作为更新提醒,所以就不贴图了,一切从简~~~主要变化:1)桌面环境实用工具组件方面没有什么变化,变化主要集中在桌面环境。用macmenu插件取代了globalmenu-xfce4插件,从而改善对GTK3程序全局菜单的支持,但是为此不得不抛弃gal...

关于UNDO表空间及undo_retention参数的一点研究_cuanshenqiao1119的博客-程序员宅基地

对于UNDO表空间大小的定义需要考虑UNDO_RETNETION参数、产生的UNDO BLOCKS/秒、UNDO BLOCK的大小。undo_retention:对于UNDO表空间的数据文件属性为autoextensible,则...

推荐文章

热门文章

相关标签