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

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第1张图片
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第2张图片

一、CSS初认识

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

1、趣调查


2、“装修小能手”

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

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

3、如何学习CSS?

Python大星前去探探路...

4、学习必备

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

CSS权威网站

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

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

二、CSS的基本使用

1、基本问题

● CSS代码写在什么地方?

● CSS的语法规则?

2、CSS代码的书写位置

● 内部样式表

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

有人可能会问,能放到其他元素里吗?

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

>> 举个栗子:

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

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

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

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

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

● 外部样式表

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

【1】理由有三:

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

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

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

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

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

3、CSS代码的语法

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

CSS语法 = 选择器 + 声明块

● 选择器(Selector)

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

① 基础选择器

394eb94c571724747f029a64f99cd6f3.png
  • 标签选择器 elementname
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第10张图片

  • 类选择器 .classname
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第11张图片

  • ID 选择器 #idname
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第12张图片

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第13张图片
  • 属性选择器 [attr=value]
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第14张图片
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第15张图片

① 关系选择器

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

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

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

  • 兄弟元素选择器 A ~ B

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

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第17张图片
  • 直接子元素选择器 A > B

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

网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第18张图片
  • 后代元素选择器 A B

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

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

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

③ 伪类选择器

选中某些元素的某种状态

1)link: 超链接未访问时的状态2)visited: 超链接访问过后的状态3)hover: 鼠标悬停状态4)active:激活状态,鼠标按下状态爱恨法则:love hate
网站https加载不出css样式_Python Web全栈之旅04--Web前端●走入CSS的世界_第21张图片

● 声明块

出现在大括号{}中

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


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

你可能感兴趣的