网站首页 > 技术文章 正文
1、CSS的概念
Cascading Style Sheet 级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
2、css的优势：
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
3、css的基本语法：
A:内部样式->css内容太要写在style标签中
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
B:外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</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>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1<p>123456</p></li>
<div>
<p>123</p>
<p>789</p>
</div>
<li>li2<p>1234567</p></li>
<li>li22<p>1234567</p></li>
<li>li3</li>
</ul>
<ul>
<li>li4</li>
</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>
<div>b1</div>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<title>属性选择器</title>
</head>
<!-- 内部样式表 -->
<style>
a{
/* 文本装饰：去超链接默认文字下划线 */
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>
<a href="#"id="one">1</a>
<a href="#" class="public">2</a>
<a href="#" class="publi">3</a>
<a href="#" class="publ">4</a>
<a href="#" class="hello">5</a>
<a href="#" class="hell">6</a>
<a href="#" class="whell">7</a>
<a href="#" class="why">8</a>
<a href="#" class="wh">9</a>
<a href="#"id="ten">10</a>
</p>
</body>
</html>
结尾：想要学习HTML、CSS的评论区留言
猜你喜欢
- 2024-11-09 「项目实战」.作家管理系统之Web应用(四)
- 2024-11-09 jQuery 单引号和双引号区别 js单双引号转义
- 2024-11-09 jQuery的DOM操作 jquery对象和dom对象
- 2024-11-09 CSS2与CSS3中常用的伪类汇总大全 css伪类hover
- 2024-11-09 自动化测试:Selenium八大元素定位简单介绍
- 2024-11-09 想让AI 驱动 UI 测试?大佬推荐这个自动化工具!
- 2024-11-09 CSS怎么选择除了第一个子元素外的其余同级子元素
- 2024-11-09 js函数--倒计时模块+无缝滚动 js实现倒计时60秒的简单代码
- 2024-11-09 Web前端开发-CSS中伪类和伪元素 css3伪类和伪元素
- 2024-11-09 CSS 中的最后一个子级选择器与最后一个类型选择器
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-