一、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. Window Nginx安装

    1.下载Nginx 下载地址:http://nginx.org/en/download.html 我这里下载的版本是: nginx/Windows-1.12.2 2.解压Nginx 把下载下来的zip ...

  2. Python小数据池

    一. id is == 二. 代码块 三. 小数据池 四. 总结 一,id,is,== 在Python中,id是什么?id是内存地址,那就有人问了,什么是内存地址呢? 你只要创建一个数据(对象)那么都 ...

  3. Angular表单 (一)表单简介

    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...

  4. zTree & ckeditor &ValidateCode.jar 使用个人心得总结

    zTree:依靠 jQuery 实现的多功能 “树插件”. 使用时只需要将下载的压缩包接用,复制里边的css 和 js 到指定目录即可. 如图所示: 在zTree的官网可以找到各种类型树的示例: 地址 ...

  5. (转载)(DescriptionResource Path Location Type The superclass "javax.servlet.http.HttpServlet" was not foun

    eclipse环境下如何配置tomcat 打开Eclipse,单击"Window"菜单,选择下方的"Preferences". 单击"Server&q ...

  6. 正文内容 python3编码问题

    来源:http://www.jb51.net/article/92006.htm 以下是全文: 这两天写了个监测网页的爬虫,作用是跟踪一个网页的变化,但运行了一晚出现了一个问题....希望大家不吝赐教 ...

  7. 简单模拟B1001

    #include<iostream> using namespace std; int main() { int n; ; cin >> n; ) { == ) { n = ( ...

  8. [RoarCTF 2019]Easy Calc-协议层攻击之HTTP请求走私

    0X01:什么是HTTP请求走私 HTTP请求走私属于协议层攻击,是服务器漏洞的一种. HTTP请求走私是一种干扰网站处理从一个或多个用户接收的HTTP请求序列的方式的技术.使攻击者可以绕过安全控制, ...

  9. Web应用和web.xml文件

    1.构建Web应用 手动构建一个Web应用: 在任意的目录小创建一个文件夹,例如webDemo 在第一步创建的文件夹中创建一个WEB-INF文件夹(注意大写); 随意找到一个Web应用,将其中的web ...

  10. springCloud 常用组件总结

    本文浅谈只是对我自己初期认识这spring cloud的一个笔记. 微服务是一种架构风格和一种应对业务的架构策略.实现这种的技术方式很多.本文主要说spring cloud. spring cloud ...