一、CSS初认识

1、趣调查

2、“装修小能手”

前面我们研究了HTML，回顾下它是做什么的？

当我们用HTML搭建好网页的基本骨架，下面请出我们的“装修小能手”--CSS。

3、如何学习CSS？

Python大星前去探探路...

4、学习必备

● 充分利用谷歌浏览器Chrome的审查元素功能

● CSS权威网站

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

二、CSS的基本使用

1、基本问题

● CSS代码写在什么地方？

● CSS的语法规则？

2、CSS代码的书写位置

● 内部样式表

书写在style元素中，一般放在中。

有人可能会问，能放到其他元素里吗？

答案：可以。但如果你使用内部样式表，建议放到head元素中，利于浏览器的加载渲染。

>> 举个栗子：

● 内联样式表(元素样式表)

直接书写在元素的全局属性style中

● 外部样式表

将样式书写到独立的css文件中。

【1】理由有三：

① 解决多页面样式重复的问题；

② 有利于浏览器缓存，提高页面响应速度；

③ 有利于代码分离，易阅读和维护。

【2】如何使用外部样式表：

3、CSS代码的语法

CSS语法 = 选择器 + 声明块

● 选择器(Selector)

CSS 选择器是CSS规则的一部分，使你能应用样式到指定元素。

① 基础选择器

标签选择器 elementname

类选择器 .classname

ID 选择器 #idname

属性选择器 [attr=value]

① 关系选择器

邻近兄弟元素选择器 A + B

选择紧跟A元素后的B元素，用+表示，选择相邻的第一个兄弟元素。

兄弟元素选择器 A ~ B

选择A元素之后的所有兄弟元素B，作用于多个元素，用~隔开

直接子元素选择器 A > B

选择所有作为A元素的直接子元素B，对更深一层的元素不起作用，用>表示

后代元素选择器 A B

选择所有被A元素包含的B元素，中间用空格隔开，在CSS使用频率高

③ 伪类选择器

选中某些元素的某种状态

1)link: 超链接未访问时的状态2)visited: 超链接访问过后的状态3)hover: 鼠标悬停状态4)active：激活状态，鼠标按下状态爱恨法则：love hate

● 声明块

出现在大括号{}中

声明块中包含很多声明(属性)，每一个声明(属性)表达了某一方面的样式。

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界相关推荐

[小白的Web全栈之旅]独立开发电子商务网站--项目创建+数据库开发
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第五篇--项目创建+数据库开发,想要预览整个系列博客的参考目录请点击这里在本博客,博主会讲解: 项目创建 PHP连接MySQL 创建数据表数据的 ...
[小白的Web全栈之旅]独立开发电子商务网站--项目介绍
Web开发,是一个看似简单,实际复杂的工程,需要包括但不限于设计师.前端开发.后端开发的程序员们来开发,而Web全栈开发,是一种carry全场,具备页面设计,前端开发,后端开发等多个技能于一身的大神程 ...
[小白的Web全栈之旅]独立开发电子商务网站--所需框架及api
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第四篇--所需框架及api,想要预览整个系列博客的参考目录请点击这里在本博客,博主会讲解: JQuery介绍 Bootstrap介绍榛子云sms ...
[小白的Web全栈之旅]独立开发电子商务网站--管理员后台开发（一、界面开发）
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第五篇--项目创建+数据库开发,想要预览整个系列博客的参考目录请点击这里在本博客,博主会讲解: 调用Bootstrap开发管理员后台登入界面调用 ...
[小白的Web全栈之旅]独立开发电子商务网站--管理员后台开发（二、登入实现+管理商品【上】）
哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第五篇--项目创建+数据库开发,想要预览整个系列博客的参考目录请点击这里在本博客,博主会讲解: 通过查询MySQL实现管理员登入查询已上架商品 ...
百度云虚拟主机中的网站不能加载静态js、css和images等文件的解决方案
百度云虚拟主机下配置个人网站不能加载静态js.css和images等文件时,需要在webroot(网站根目录)下创建bcloud_nginx_user.conf,在这个文件里面设置加载静态文件资源. ...
Node 本地网站服务器网页加载不出图片的解决方法
文章目录前言遇到的问题源代码前言最近在自学 Node.js 准备入门前端在用 Node 配置本地网站服务器的时候连上了自己期末的前端综合实验设计的作业遇到了一些问题来记录一下. 遇到的问 ...
https访问http加载不出图片_前端解决第三方图片防盗链的办法
作者:biaochenxuying 转发链接:https://github.com/biaochenxuying/blog/issues/31 问题笔者网站的图片都是上传到第三方网站上的,比如简书 ...
使用mavon-editor文本老是出现css加载失败导致没有样式怎么办
使用mavon-editor文本老是出现css加载失败导致没有样式怎么办背景:最近自己在pc端和手机端测试本博客的时候,老是出现样式加载失败,导致页面很难看,强迫症的我就去想办法解决这个问题如下情 ...

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界

一、CSS初认识

二、CSS的基本使用

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界相关推荐

最新文章

热门文章