css

CSS是什么

层叠样式表(CascadingStyleSheets).

CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果.能够做到页面的样式和结构分离.

基本语法规范

选择器{一条/N条声明}
选择器决定针对谁修改(找谁)
声明决定修改啥.(干啥)
声明的属性是键值对.
使用;区分键值对,

注意:
CSS要写到style标签中
style标签可以放到页面任意位置.一般放到head标签内.
CSS使用/**/作为注释.(使用ctrl/快速切换).

引入方式

内部样式表

写在style标签中.嵌入到html内部.
理论上来说style放到html的哪里都行.但是一般都是放到head标签中.
优点:这样做能够让样式和页面结构分离.
缺点:分离的还不够彻底.尤其是css内容多的时候.

行内样式表

通过style属性,来指定某个标签的样式.
只适合于写简单样式.只针对某个标签生效.
缺点:不能写太复杂的样式.
这种写法优先级较高,会覆盖其他的样式.

外部样式

实际开发中最常用的方式.

1. 创建一个css文件.
2. 使用link标签引入css

注意:不要忘记link标签调用CSS,否则不生效.
优点:样式和结构彻底分离了.
缺点:受到浏览器缓存影响,修改之后不一定立刻生效.

关于缓存:

这是计算机中一种常见的提升性能的技术手段.
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的.如果频繁访问该网站,那么这些外部资源
就没必要反复从服务器获取.就可以使用缓存先存起来(就是存在本地磁盘上了).从而提高访问效率.
可以通过ctrlF5强制刷新页面,强制浏览器重新获取css文件.

CSS不区分大小写,我们开发时统一使用小写字母

选择器的功能

选中页面中指定的标签元素.
要先选中元素,才能设置元素的属性.

选择器的种类

以下内容只是CSS2标准中支持的选择器

1. 基础选择器:单个选择器构成的
   标签选择器
   类选择器
   id选择器
   通配符选择器
2. 复合选择器:把多种基础选择器综合运用起来.
   后代选择器
   子选择器
   并集选择器
   伪类选择器参考文档:https://www.w3school.com.cn/cssref/css_selectors.asp>
   基础选择器
   标签选择器
   特点:
   能快速为同一类型的标签都选择出来.
   但是不能差异化选择

类选择器

特点:
差异化表示不同的标签
可以让多个标签的都使用同一个标签.

语法细节:

类名用.开头的
下方的标签使用class属性来调用.
一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割,这种做法可以让代
码更好复用)
如果是长的类名,可以使用-分割.
不要使用纯数字,或者中文,以及标签名来命名类名.

注意:一个标签可以同时使用多个类名

作用特点

标签选择器能选出所有相同标签不能差异化选择
类选择器能选出一个或多个标签根据需求选择,最灵活,最常用.
id选择器能选出一个标签同一个id在一个HTML中只能出现一次
通配符选择器选择所有标签特殊情况下使用

id选择器

和类选择器类似.
CSS中使用#开头表示id选择器
id选择器的值和html中某个元素的id值相同
html的元素id不必带#
id是唯一的,不能被多个标签使用(是和类选择器最大的区别)

后代选择器

又叫包含选择器.选择某个父元素中的某个子元素.
元素1和元素2要使用空格分割

选择器作用注意事项

后代选择器选择后代元素可以是孙子元素
子选择器选择子元素只能选亲儿子,不能选孙子
并集选择器选择相同样式的元素更好的做到代码重用

其他