提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

CSS笔记(3)

笔记CSS
2023-06-13 09:12:59 时间

CSS笔记(3)

刚刚学习完了CSS的文本属性,感觉还不是很难但是知识点还挺多的,偶尔会忘记一些...发现做笔记还是很有用的,我经常会翻自己写过的文章来看,感觉其实html不算太难,但是要记得东西真的好多好多啊...幸好我记了笔记.

学习内容:

CSS的引用方式:

行内样式表/内部样式表/外部样式表

Emmet语法;

(一)复合选择器:

后代选择器/子选择器

(二)伪类选择器;

链接伪类选择器

CSS的引用方式

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

行内样式表(内联样式表)是在元素标签内部的style属性中设定的CSS样式.适合于修改简单样式.

2.内部样式表(嵌入式)

内部样式表是写到html页面内部,是将所有的CSS代码抽取出来,单独放在一个<style>标签中.

<style>标签理论上可以放在html文档的任意地方,但一般会放在<head>标签中.

3.外部样式表(链接式)用的最多!

实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用.

1.新建一个后缀为.css的样式文件,把所有的CSS代码都放入此文件中.

2.在html页面中,使用<link>标签引入这个文件

<link rel="stylesheet" href="CSS文件路径">

Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode已经集成该语法.

  1. 快速生成html结构语法
  2. 快速生成CSS样式

2.Emmet也可以快速生成CSS样式,比如text align: center我们可以输入tac, width: 100px可以输入w100.

(一)CSS的复合选择器

在CSS中,可以根据选择器的类型把选择器分成基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的.

  • 复合选择器可以更准确,更高效的选择目标元素(标签).
  • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的.
  • 常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等.

1.后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分割.当标签发生嵌套时,内层标签就称为外层标签的后代.

语法:

元素1 元素2 {样式声明}

上述语法表示选择元素1里面的所有元素1(后代元素)

例如:

ul li {样式声明}

  • 元素1和元素2中间用空格隔开
  • 元素1是父级,元素2是子级,最终选择的是元素2
  • 元素2可以是儿子,也可是是孙子等,只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器.

2.子选择器(重要)

子元素选择器只能选择作为某元素的最近一级子元素.简单理解就是选亲儿子元素.

语法:

元素1 > 元素2 {样式声明}

  • 元素1和元素2之间用大于号隔开
  • 元素1是父级,元素2是子级,最终选择的是元素2.

3.并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式.通常用于集体声明.

并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的部分.

语法:

元素1,元素2 {样式声明}

实例操作:

需求1:将a标签中的"百度"改成红色

    <div class="nav">
        <ul>
            <li><a href="">百度</a> </li>
            <li><a href="">百度</a></li>
        </ul>
    </div>

考察的是后代选择器,首先我们定位到div,ul是div的儿子,li是ul的儿子,a又是li的儿子,所以选择的是后代选择器. 

<style>
    .nav ul li a {
        color: #ff0000;
    }
</style>

需求2:

将"大肘子"改成别的颜色

 <div class="hot">
        <a href="">大肘子</a>
        <ul>
            <li><a href="">猪头</a></li>
            <li><a href="">猪尾巴</a></li>
        </ul>        
    </div>

这里考察的是子选择器,他只会选择离他最近的子元素的标签,在这里,有大肘子的a标签就是div最近的子标签,所以要用子选择器. 

<style>
    .hot>a {
            color :rgb(188, 231, 68);
        }
</style>

需求3:①将熊大和熊二改成粉色 ②同时也将小猪佩奇一家改成粉色

①:

    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪妈妈</li>
        <li>猪爸爸</li>
    </ul>

这时候,熊大和熊二的标签是不同的,但是要同时修改他们,所以要用到并集选择器.

<style> 
       .bear,p {
            color:pink;
        }
</style>

②:

由于任何形式的选择器都可以作为并集选择器的一部分,所以

       <style>
        .bear, p, .pig {
            color:pink;
        } 
        </style>

(二)伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素.

伪类选择器书写最大的特点就是冒号(:)表示,比如:hover/:first-child.

伪类选择器很多,比如链接伪类,结构伪类...这里主要学习链接伪类选择器.

1.链接伪类选择器

a:link 选择未访问过的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接(鼠标按下未弹起的链接)

注意事项:

为了确保生效,请按照LVHA的顺序声明 :Link-:Visited-:Hover-:Active

因为a链接在浏览器中具有默认样式,所以我们在实际工作中都需要给链接单独指定样式.

2.focus伪类选择器

:focus伪类选择器用于获取焦点的表单元素.

焦点就是光标,一般情况<input>表单元素才能获取,因此这个选择器也主要针对于表单元素来说.

效果如下:

当鼠标点击文本框时,边框的颜色会变化.

再或者是

当鼠标点击文本框时背景颜色的变化.

大致的语法:

总结:

相关文章