首页 > 其他分享 >19号CSS学习

19号CSS学习

时间:2022-12-20 06:44:04浏览次数:49  
标签:行内 伪类 19 元素 链接 学习 background 选择器 CSS

一、CSS的复合选择器

  • 更高效的选择目标元素。
  • 后代选择器、子选择器、并集选择器、伪类选择器等。

1.后代选择器

  • 可以选择父元素里的子元素。
  • 又称包含选择器。
  • 必须是空格,必须是后代,ul li {color: red;}。
  • 儿子、孙子都可以,只要是后代就行。ol li a {color: red;}。
  • 可以是任意基础选择器。

2.子元素选择器

  • 选择亲儿子元素。
  • >分隔div>p {color: red;}。

3.并集选择器

  • 可以选择多组标签,同时为他们定义相同的样式。
  • .隔开。
  • 任何选择器都可以作为并集选择器的一部分。
  • 喜欢竖着写。

4.伪类选择器

  • 用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或者选择第1个,第n个元素。
  • 用冒号表示,如:hover。
  • 有链接伪类、结构伪类等。
  • 链接伪类选择器:
  1. a:link             /*选择所有未被访问的链接*/ 
    a:visited          /*选择所有已被访问的链接*/ 
    a:hover            /*选择鼠标指针位于其上的链接*/ 
    a:active           /*选择活动链接(鼠标按下未弹起的链接)*/  
  2. 注意事项:必须按顺序LVHA;必须给链接单独指定样式。
    /*   一般开发中的写法    */
    a { color: gray; } a:hover { color: red; }  

5.:focus伪类选择器

  • 用于获得焦点得表单元素。

二、CSS的元素显示模式

  • 了解不同类型的标签更好地布局网页。
  • 就是以什么方式进行显示。
  • 分为块元素和行内元素。

1.块元素

  • 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中div是最典型的块元素。
  • 自己独占一行。
  • 可设置宽高,默认宽为父级的。
  • 里面可以方行内或者块级元素(文字类的元素内不能放块级元素)。

2.行内元素

  • 常见的<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,典型的是span。
  • 一行可以多个。
  • 高宽设置无效。
  • 只能容纳文本或其他行内元素。
  • 链接里面不能再放链接。
  • 特殊情况链接<a>里面可以放块级元素,但是给<a>转换一下块级模式最安全。

3.行内块元素

  • 特殊的标签<img>、<input>、<td>,它们同时具有块元素和行元素的特点。有些资料称它们未行内块元素。
  • 一行可以有多个,中间有空白缝隙。(行内元素特点)
  • 本身的宽度是内容的宽度。(行内元素特点)
  • 可以设置宽度高度。(块级元素特点)

4.元素显示模式转换

  • 简单理解:一个模式的元素需要另一种模式的特性。
  • 比如想要增加链接<a>的出发范围。
  1. 转换为块元素:display:block;。
  2. 转换为行内元素:display: inline;。
  3. 转换为行内块元素:display: inline-block;。

5.小工具 snipaste

  • 截图工具,可以贴到屏幕上。

三、CSS的背景

  • 给页面元素添加背景样式。
  1. 背景颜色:teansparent/color。
  2. 背景图片:非常便于控制位置,background-image: none/url。
  3. 背景平铺:background-repeat:repeat/no-repeat/repear-x/repeat-y。
  4. 背景图片位置:background-position: x y;可以使用方位名词或精准单位。(1)都是方位名词。(2)只写一个另一个默认居中。(3)参数值是精确坐标,则必定先x后y。如果只指定一个数值,那该数值一定是x坐标,另一个默认居中对齐。(4)混合使用时,第一个必是x第二个必是y。
  5. 背景图像固定:background-attachment: scroll/fixed。
  6. 背景复合写法:将这些属性简写再同一个属性bacjground中,没有特定的顺序。background:背景颜色 背景图片 背景平铺 背景图像滚动 背景图像位置。
  7. 背景色半透明:background: rgba(0,0,0,0.3);alpha取值0~1。(可以写成.3)
  • 参数值 说明
    length 百分数、由浮点数字和单位标识符组成的长度值
    position top|center|bottom|left|center|right 方位名词

 

 

四、CSS三大特性

  • 层叠行、继承性、优先级。

1.层叠性

  • 一个样式会覆盖另一个冲突的样式。
  • 冲突时,就近原则,哪个离结构近就执行哪个样式。

2.继承性

  • 子标签继承父标签的某些样式。
  • 行高的继承性:font: 12px/1.5 "Microsoft YaHei";(1.5表示行高为当前元素大小的1.5倍)。优势是里面的元素可以根据自己文字大小自动调整行高。

3.优先级

  • 选择器相同,则执行层叠性。
  • 选择器不同,则根据选择器权重执行。
  • 选择器 选择器权重
    继承或者* 0,0,0,0
    元素选择器 0,0,0,1
    类选择器,伪类选择器 0,0,1,0
    ID选择器 0,1,0,0
    行内样式style="" 1,0,0,0
    !important 重要的 ∞无穷大

 

标签:行内,伪类,19,元素,链接,学习,background,选择器,CSS
From: https://www.cnblogs.com/SHUOSHIBUDEERYI/p/16993464.html

相关文章