一、CSS初识

  CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

  CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

二、引入CSS样式表

1.行内式(内联样式)

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

2.内部样式表

<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

3.外部样式表(外链式)

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

三、CSS基础选择器

1.标签选择器

  标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

2.类选择器  

  类选择器使用“.”(英文点号)进行标识,后面紧跟类名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> /*千万别忘了它*/
/*上面点声明 ,下面class调用*/
span { /*标签选择器 让所有的span 都变成 150 */
font-size: 150px;
}
.g {
color: skyblue;
}
.o {
color: red;
}
.oo {
color: orange;
}
.l {
color: green;
}
/* 类选择器 可以选择 一个 或者 多个 标签*/
</style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>
<div class="nav"></div> <!-- 导航 我们习惯性的约定 -->
<div class="banner"></div> <!-- 导航 我们习惯性的约定 -->
</body>
</html>

3.多类名选择器

  给同一标签指定多个类名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>.red{
color: red;
}.font20{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<div class="font20 red">多类名</div>
<div>多类名</div>
<p class="red">多类名</p>
</body>
</html>

4.id选择器

  id选择器使用“#”进行标识,后面紧跟id名。

<!DOCTYPE html>
<head>
<style>#last{
color: pink;
}
</style>
</head>
<body>
<div>id选择器</div>
<div id="last">id选择器</div>
</body>
</html>

id选择器和类选择器区别:

  类选择器(class) 好比人的名字, 是可以多次重复使用;  id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。

  id选择器和类选择器最大的不同在于 使用次数上。

5.通配符选择器

  用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。通配符选择器基本用不到。

     * {  /** 代表所有标签的意思 使用较少 */
color: pink;
}

四、复合选择器

1.父代选择器

  后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。

<head>
<style>
/*需求 把所有的王思聪选出来*/
div p { /*河北 邯郸 后代选择器*/
color: pink;
}

    .jianlin p { /*中间用空格隔开*/
      color: purple;
    }

</style>

</head>
<body>
<div> 王者荣耀 </div>
<div> 王者荣耀 </div>
<div>
<p>王思聪</p>
</div>
<div class="jianlin">
<p>王思聪</p>
</div>
</body>
</html>

2.子代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接,注意,符号左右两侧各保留一个空格。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*1. 需求 要一级菜单改为蓝色 */
ul li a { /*后代选择器 ul li下所有 a 标签内容变为红色*/
color: red;
}
ul li > a { /*子代选择器 子 指的是 亲儿子(即最近层级) 大于号分割,仅设定 ul li下一层 a 标签内容变为绿色
*/ 
     color: green;
} </style>
</head>
<body>
<ul>
<li>
<a href="#">一级菜单</a>
<div>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
<a href="#">二级菜单</a>
</div>
</li> </ul>
</body>

3.交集选择器

  交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间用 . 连接。

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div.red { /*交集选择器 选择div下面,class="red" */
color: red;
}
</style>
</head>
<body>
<div>交集选择器</div>
<div class="red">交集选择器</div>
<p>交集选择器</p>
<p class="red">交集选择器</p>
</body>

4.并集选择器

  选择器通过逗号连接而成的,任何形式的选择器都可以作为并集选择器的一部分。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*1. 需求 吧 div p span 改为红色*/
div, p, span { /*并集选择器 用逗号隔开 , 代表 和 集体声明 适合于相同样式 */
color: red;
}
</style>
</head>
<body>
<div>并集选择器</div>
<div>并集选择器</div>
<div>并集选择器</div>
<p>并集选择器</p>
<p>并集选择器</p>
<p>并集选择器</p>
<span>并集选择器</span>
<span>并集选择器</span>
<span>并集选择器</span>
<span>并集选择器</span>
<h1>并集选择器</h1>
<a href="#">并集选择器</a>
</body>
</html>

5.伪类选择器

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

6.链接伪类选择器

- :link      /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候,他们的顺序尽量不要颠倒 按照 lvha 的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a:link { /* 未访问过的连接状态*/
color: #3c3c3c;
font-size: 25px;
text-decoration: none; /*取消下划线*/
font-weight: 700;
}
a:visited { /*这个链接我们已经点过的样子 已访问过链接*/
color: orange;
}
a:hover { /*鼠标经过连接时候的样子*/
color: #f10215;
}
a:active { /*鼠标按下时候的样子*/
color: green;
} </style>
</head>
<body>
<a href="http://www.asdf12312312312312.com">秒杀</a>
</body>
</html>

实际开发中的伪类链接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a {
color: #333;
text-decoration: none;
font-size: 25px;
font-weight: 700;
}
a:hover { /*鼠标经过*/
color: #f10215;;
}
</style>
</head>
<body>
<a href="http://www.asdf12312312312312.com">秒杀</a>
</body>
</html>

五、综合测试题 (1)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.site-r a {
color: red;
}
.nav a { /*后代选择器*/
color: orange;
} .nav, .sitenav { /*并集选择器*/
font: 14px "微软雅黑";
}
.nav> ul > li > a { /*子代选择器*/
color: green; /*123123123 */
}
</style>
</head>
<body> <div class="nav"> <!-- 主导航栏 -->
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li>
<a href="#">联系我们</a>
<ul>
<li><a href="#">公司邮箱</a></li>
<li><a href="#">公司电话</a></li>
</ul>
</li>
</ul>
</div>
<div class="sitenav"> <!-- 侧导航栏 -->
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>

六、综合测试题(2)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
text-align: center;
}
.nav a{ /*后代选择器 限定范围 */
width: 120px;
height: 50px;
/*background-color: pink;*/
/*因为a是行内元素, 没有大小,我们需要转换 inline-block */
display: inline-block;
background-image: url(images/bg.png);
text-align: center; /*让盒子内的文字居中对齐*/
/*1. 行内元素 行内块元素 我们可以看做文本 */
color: #fff;
text-decoration: none; /*取消下划线*/
/*2. 行高等于盒子的高度,可以让 单行文本垂直居中*/
line-height: 50px;
}
.nav a:hover { /*当我们鼠标经过了 nav 里面的连接的时候*/
background-image: url(images/bgc.png);
}
</style>
</head>
<body>
<div class="nav"> <!-- 导航栏开始了 -->
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
</div>
</body>
</html>

--

003.前端开发知识,前端基础CSS(2020-01-07)的更多相关文章

  1. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  4. 前端开发概述+JS基础细节知识点

    一 前端开发概述 html页面:html css javascript 拿到UI设计图纸:切图-->html+css静态布局-->用JS写一写动态效果-->ajax和后台进行交互,把 ...

  5. Vue.js高效前端开发知识 • 【目录】

    持续更新中- 章节 内容 实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...

  6. 我在阿里这仨月 前端开发流程 前端进阶的思考 延伸学习的方式很简单:google 一个关键词你能看到十几篇优秀的博文,再这些博文中寻找新的关键字,直到整个大知识点得到突破

    我在阿里这仨月 Alibaba 试用期是三个月,转眼三个月过去了,也到了转正述职的时间.回想这三个月做过的事情,很多很杂,但还是有重点. 本文谈一谈工作中遇到的各种场景,需要用到的一些前端知识,以及我 ...

  7. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  8. 006.前端开发知识,前端基础CSS(2020-01-21)

    来源:第五天  01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...

  9. 005.前端开发知识,前端基础CSS(2020-01-14)

    一.CSS权重 权重是可以叠加的,事例如下: div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> ...

随机推荐

  1. BZOJ 4033: [HAOI2015]树上染色

    题解: 树形DP 思路,考虑每条边的贡献,即这条边两边的黑点数量相乘+白点数量相乘再成边长 #include<iostream> #include<cstdio> #inclu ...

  2. Android 心跳包心跳连接 如何实现android和服务器长连接呢?推送消息的原理

    前言:现在的大多数移动端应用都有实时得到消息的能力,简单来说,有发送消息的主动权和接受消息的被动权.例如:微信,QQ,天气预报等等,相信好处和用户体验相信大家都知道吧. 提出问题:这种功能必须涉及cl ...

  3. ES6 之 第七种数据类型Symbol

    概述 为了减少对象的属性名冲突,ES6引入新的原始数据类型Symbol,JS的第七种数据类型. Symbol 能够保证每个属性的名字都是独一无二,这样就能从根本上防止属性名冲突. Symbol 值能够 ...

  4. VUE 引用公共样式

    首先创建公共样式文件 在main.js中引用样式 浏览器效果图

  5. 为什么声明了int型的变量并且直接初始化后,int型变量的地址一直在变化?

    /************************************************************************* > File Name: ptr_varia ...

  6. UML-迭代3-中级主题

    初始阶段和迭代1:揭示了大量面向对象分析和设计建模的基础知识. 迭代2:特别强调对象设计模式 迭代3:涉及主题比较宽泛: 1).更多GoF设计模式及其在框架(尤其是一个持久化框架)的设计中的应用. 2 ...

  7. HGP|VCG|UK10K|中科院职业人群队列研究计划|药物基因组学

    全球性计划:表观组计划:肝计划 测1000人的变异level HGP计划三个阶段,范围逐步扩大和深化. Pilot:deep sequence---low coverage Phase 1 Phase ...

  8. 30 docker swarm service 的创建维护和水平拓展

    运行环境在上两篇文章中已经搭建 1. 创建一个service (与 docker run 类似 ,创建一个 container) docker service create --name demo b ...

  9. java 单利模式设计原理,饿汉式懒汉式,开发中推荐饿汉式

    单例模式的设计:  1 //Single类进内存,对象还没有存在,只有调用了getInstance方法时,才建立对象. //对象是方法被调用时,才初始化,也叫做对象的延时加载.成为:懒汉式. //Si ...

  10. 用IDLE调试python程序

    1. 设置断点 先放例子: import pdb a=1 b=10 pdb.set_trace()#这里是断点 c=a+b print(c) import pdb 后,用pdb.set_trace() ...