网站首页 > 知识剖析正文

认识CSS-第四章

nixiaole 2024-11-21 19:08:33 知识剖析 19 ℃

1、CSS的概念

Cascading Style Sheet 级联样式表

表现HTML或XHTML文件样式的计算机语言

包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

2、css的优势：

内容与表现分离

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

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

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

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

3、css的基本语法：

A:内部样式->css内容太要写在style标签中

h1 {

font-size:12px;

color:#F00;

}

</style>

优点

方便在同页面中修改样式

缺点

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

B:外部样式表

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

HTML文件引用扩展名为.css的样式表

<head>

……

……

</head>

4、css的基本选择器：标签选择器、类选择器、ID选择器

标签选择器：<h1>…<h6>、<p>、<img/>

p { font-size:16px;}

类选择器：

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

.class { font-size:16px;}

ID选择器：

<标签名 id= "id名称">标签内容</标签名>

#id { font-size:16px;}

总结：

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

5、高级选择器：

层次选择器

结构伪类选择器

属性选择器

话不多说，直接上示例：

<!DOCTYPE html>

<html>

<head>

<title>结构伪类选择器</title>

</head>

<style>

/* 结构伪类选择器 */

/* ul li:first-child ul后代li匹配第一个子元素li */

ul li:fi留言rst-child {

background-color: red;

}

/* ul li:last-child ul后代li匹配最后一个子元素li */

ul li:last-child {

background-color: green;

}

/* p:nth-child(1) */

/* p标签匹配不同层级的第一个元素 */

p:nth-child(1){

background-color: yellow;

}

/* 只要标签里包含第二个类型时P标签的元素就能匹配（只要是标签里的重复第二个P标签就能匹配） */

p:nth-of-type(2){

background-color: blue;

}

</style>

<body>

<ul>

<div>

</div>

</ul>

<ul>

</ul>

</body>

</html>

<html>

<head>

<title>层次选择器</title>

</head>

<style>

/* 后代选择器 */

/* body标签里所有的P标签 */

li p {

background: red;

}

/* 子选择器 */

/* body里面开始从第一个P标签匹配（只匹配一代） */

body>p {

background: pink;

}

/* 相邻兄弟选择器 */

/* 类选择器.active与它相邻（同级）匹配的第一个P标签<从上往下匹配> */

.active+p{

background: green

}

/* 通用兄弟选择器 */

/* 类选择器.avtive与他同级，匹配所有P标签 */

.active~p{

background: lavender;

}

</style>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html >

<head>

<title>属性选择器</title>

</head>

<style>

/* 文本装饰：去超链接默认文字下划线 */

text-decoration: none;

color:pink;

}

/* 属性选择器 */

/* a[id]所有a标签里只要设置了id属性的，html元素会变 */

a[id]{

background-color: yellow;

}

/* a[id]所有a标签里只匹配设置了id属性的 */

a[id=one]{

background:red;

}

/* a标签里class属性值包含publi所有html元素 */

a[class*=publi]{

background :blue;

}

/* a标签里class属性值以he开头的所有html元素 */

a[class^=he]{

background-color: gray;

}

/* a标签里class属性值以hy结尾的所有html元素 */

a[class$=hy]{

background:rebeccapurple;

}

</style>

<body>

<p>

</p>

</body>

</html>

结尾：想要学习HTML、CSS的评论区留言

上一篇：一般清除浮动的三种方式
下一篇： web前端:js-DOM原生轮播图实现解构稳基础框架顺手捏来

网站首页 > 知识剖析 正文

认识CSS-第四章

猜你喜欢

网站首页 > 知识剖析正文