【JavaWeb】前端三剑客—CSS基础知识

目录

一、CSS 是什么

二、基本语法规范

三、引入方式

内部样式表

行内样式表

外部样式

​三、选择器

标签选择器

类选择器

id 选择器

四、复合选择器

后代选择器

子选择器

伪类选择器

五、常用元素属性

字体属性

文本属性

六、背景属性

背景颜色

背景平铺

七、Chrome 调试工具

标签页含义

元素的显示模式

块级元素

行内元素/内联元素

盒模型

边框

内边距

外边距

---

一、CSS 是什么

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

二、基本语法规范

        选择器 + {一条/N条声明}

        选择器决定针对谁修改 (找谁)

        声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.

    


  

hello word

注意:

CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

三、引入方式

内部样式表

写在 style 标签中. 嵌入到 html 内部. 理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.

行内样式表

   


  

    
眼睛需要绿色

通过 style 属性, 来指定某个标签的样式. 只适合于写简单样式. 只针对某个标签生效.

缺点: 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式.

外部样式

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

1. 创建一个 css 文件.

2. 使用 link 标签引入 css

    
    
    
    

    

    
睡觉

div{
    color: rgb(177, 41, 170);
}

三、选择器

标签选择器

    
    
    
    



    
李白
    
李白
    
李白
    
杜甫
    
杜甫
    
杜甫

特点：

能快速为同一类型的标签都选择出来.

但是不能差异化选择

类选择器

    
    
    
    

    

    
小猫
    
小狗

特点:

差异化表示不同的标签

可以让多个标签的都使用同一个标签

语法细节:

类名用 . 开头的

下方的标签使用 class 属性来调用.

一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)

如果是长的类名, 可以使用 - 分割.

不要使用纯数字, 或者中文, 以及标签名来命名类名.

id 选择器

    
    
    
    

    

    
哈哈哈

CSS使用#开头表示id选择器

id 选择器的值和 html 中某个元素的 id 值相同

html 的元素 id 不必带 #

id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别

四、复合选择器

后代选择器

    
    
    
    

    

    

        
aaa
        
aaa
        
ccc
    
 

又叫包含选择器. 选择某个父元素中的某个子元素

元素 1 和 元素 2 要使用空格分割

 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

    
    
    
    

    

    

        
dddd
        
eeee
        
fff
        
fff
    

 可以是任意基础选择器的组合. (包括类选择器, id 选择器)

子选择器

    
    
    
    

    

    

        链接1
        
链接2
    

使用大于号分割

只选亲儿子, 不选孙子元素

    
    
    
    

    

    

        

            
小猫
            
小猫
        
       
    

 代码中的 "小猫" 改成红色

伪类选择器

    
    
    
    

    

    小猫

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

五、常用元素属性

字体属性

    
    
    
    



    

        

            微软眼黑
        
        

            宋体
        
    

多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )

如果字体名有空格, 使用引号包裹.

建议使用常见字体, 否则兼容性不好.

文本属性

    
    
    
    

    

    
你还村民怕是

    
    
    
    

    

    

        
左对齐
        
右对齐
        
居中对齐
    

    
    
    
    

    

    

        
啥都没有
        
下划线
        
上划线
        
删除线
    
    

六、背景属性

背景颜色

    
    
    
    



    

        
红色背景
        
绿色背景
        
透明背景
    

背景平铺

    
    
    
    



    

    
不平铺
    
水平平铺
    
垂直平铺
    

七、Chrome 调试工具

标签页含义

elements 查看标签结构

console 查看控制台

source 查看源码+断点调试

network 查看前后端交互过程

application 查看浏览器提供的一些扩展功能(本地存储等)

元素的显示模式

块级元素

    
    
    
    

    

    

        

            

                child1
            
            

                child2
            
        
    

行内元素/内联元素

    
    
    
    

    

    

        child1
        child2
        child3
    
    

盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子" 这个盒子由这几个部分构成

边框 border 内容 content 内边距 padding 外边距 margin

边框

    
    
    
    



    
text

粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

内边距

    
    
    
    



    
text

默认内容是顶着边框来放置的. 用 padding 来控制这个距离 可以给四个方向都加上边距

padding-top padding-bottom padding-left padding-right

外边距

    
    
    
    



    
哈哈
    
呵呵

控制盒子和盒子之间的距离. 可以给四个方向都加上边距

margin-top margin-bottom margin-left margin-right