第四章初识CSS

同游余生984

已于 2024-08-07 14:19:20 修改

阅读量845

点赞数 5

文章标签： html 笔记前端 css

于 2024-08-07 08:53:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62316964/article/details/140971428

版权

CSS的概念（Cascading Style Sheet 级联样式表）

表现HTML或XHTML文件样式的计算机语言包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

CSS的优势

1，内容与表现分离

2，网页的表现统一，容易修改

3，丰富的样式，使得页面布局更加灵活

4，减少网页的代码量，增加网页的浏览速度，节省网络带宽

5，运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS的基本语法

      选择器（例如p,h1,li.....）{
                 font-size:12px;设置字体颜色
                   color:red;设置字体颜色
        }

注意：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上

1、style标签

<style type="text/css">

        h1 {

                font-size:12px;

                color:#F00;

}

</style>

2、 HTML中引入CSS样式

行内样式

使用style属性引入CSS样式

例如 <h1 style="color:red;">style属性的应用</h1>

<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表

                CSS代码写在<head>的<style>标签中

                <style> h1{color: green; } </style>

                优点：方便在同页面中修改样式

                缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表，有两种方式 链接式导入式

<link href="css/index.css" rel="stylesheet" />
<style>
   /*外部样式，导入式*/
   @import url("css/index.css");
</style>

css优先级：行内样式>内部样式表>外部样式表就近原则

CSS3基本选择器

1、标签选择器

HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/>

语法p { font-size:16px;}

类选择器（常用）

<标签名 class= "类名称">标签内容</标签名>

语法：.class { font-size:16px;} （注意：起的名字不能用数字）

ID选择器

语法#id { font-size:16px;} （注意：起的名字不能用数字）

注意：优先级为遵循ID选择器 > class类选择器 > 标签选择器的优先级，不追寻就近原则

2、层级选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面（只能选他下面的）
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素（可以选其他下面其他的）

3、结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

注意：一般用后面三个，因为标签前面容易改变

4、属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
*E[attr=val]**	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

示例：<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style type="text/css">
       a[href^='w']{
           font-size: 97px;
       }
   </style>
   <body>
       <a>123</a>
       <span>马奇</span>
       <a href="www.baidu.com">zhangsan</a>
       <a href="www.jingdong.com">李六</a>
       <a href="aww.jd.com">王五</a>
       <a href="www.tiaobao.com">赵六</a>
   </body>
</html>