CSS 基础学习

最新推荐文章于 2024-07-25 08:14:42 发布

啊嘞嘞嘞嘞

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量93

点赞数

分类专栏： WEB前端文章标签： css

WEB前端专栏收录该内容

29 篇文章 5 订阅

订阅专栏

简介

层叠样式表(级联样式表)
全称: Cascading Style Sheets
主要用来设置网页的样式
后缀名： .css
注释：/…/
编程字体：consolas， monaco， Fira Code,
source code pro, ubuntu mono
用的字体，能分清 1跟l 0跟o
浏览器默认行为：p标签—-上下16px的外边距

小技巧

快速选择

点结尾，按住shift，点击开始处————-快速选中一段内容
按住Ctrl+shift，再按住键盘的右键箭头——快速选择一段文本或符号
按住Ctrl，再按键盘左右箭头—————-快速移动光标

操作技巧

ctrl + 箭头—————快速移动光标
ctrl + shift + 箭头——快速选择一段文本或单词
双击———————–快速选择一个单词
home（PgUp）——–跳到行首
end（PgDn）———-跳到行尾

CSS内容

1.选择器

元素选择器

  div------------就是div{ } 选择的是所有的div标签
  *通配符---------就是  *{ }  选中所有元素
  class----------属性名前加“.”，例如 .yellow-text{ } 
       ----------class命名：多个单词的时候： word1-word2
  id-------------属性名前加“#”，例如 #blue-background{ }
 
 1
2
3
4
5

  注意：ID是唯一标识
       一个页面中不要有重复的ID，一个ID名只能出现一次
       一般不要用ID作为选择器，因为优先级比较高
       不要轻易使用  !important
 
 1
2
3
4

   选择器优先级-----!important > #id选择器 > .class选择器
    > 标签选择器div > 通配符*
 
 1
2

关系选择器

    后代选择器（空格）----------eg.div a{ }
           选中的是div中所有的a标签，不管是子级还是孙子级别的都会被选中
    子级选择器（>）-------------eg.div>a{ }
           只会选中div的子级a元素，孙子级不会被选中
 
 1
2
3
4

2.属性

尺寸属性

宽--------width:400px;
高--------height:300px;
文字大小---font-size:25px;
内边距-----padding:35px;
     -----padding-left:4px;
边距-------border:1px;
外边距-----margin:25px;
 
 1
2
3
4
5
6
7

颜色属性

字体颜色-----color:#0ab;
背景颜色-----background:#0df;
       -----background-color:#0df;
       -----background-image:url( 路径及图片名 );
 
 1
2
3
4

3.HTML中CSS的使用方式

内联引入

方式：在元素上加属性style
格式：<属性 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">
     </属性>
缺点：与HTML混合在一起，代码不美观；
     内联样式一次，只能对一个标签起作用，
     如果有多个相同属性样式，需要重复写很多；
     可维护性差；
     可复用性差。
 
 1
2
3
4
5
6
7
8

内嵌引入

方式：在head里写style标签，style标签中写CSS内容
格式：<style>
         选择器{ 属性1:属性值1;属性2:属性值2;属性3:属性值3; }
         div{
                 font-size:20px;
                 color:#0ab;
             }
     </style>
缺点：可复用性差
     维护性一般
     与HTML混在一起，不美观
 
 1
2
3
4
5
6
7
8
9
10
11

外部引入

方式：将CSS样式内容独立为 .css 文件，在HTML中通过link标签引入
格式：.css文件中
      属性1:属性值1;
      属性2:属性值2;
      属性3:属性值3;
      .html文件<head>标签中 
      <link rel="stylesheet" href="css/03.css" />
好处： 将CSS与HTML独立出来，代码整洁
      可复用性高
      可维护性高
 
 1
2
3
4
5
6
7
8
9
10

link标签的属性：
      rel="stylesheet"          告诉浏览器这是一个样式表
      href="CSS文件的路径"   链接引入对应的CSS文件

 
 1
2
3
4

导入（不推荐使用）

方式：@import 导入文件
格式一：<style>
           @import url(CSS文件的路径及文件名)
        </style>
格式二：在CSS文件中带入其他CSS文件的内容
       eg.03.css文件中已经写好内容，在04.css文件中写：
       @import url(03.css);
 
 1
2
3
4
5
6
7

注意：如果样式表内容不多，可以使用内嵌的方式，绝大多数情况推荐使用外部引入的方式。
 
 1

引入方式的优先级
link与style内嵌同时存在，采用“就近原则”，后写的会将先写的覆盖掉；
内联的优先级要高于内嵌跟外部引入。
“`
@import与link的区别
link是HTML标签，@import只能在CSS中使用
link会在网页加载时同时加载，而@import需要网页完全载入才能加载
link无兼容问题，@import 是CSS2.1以后加入的，兼容性一般
link可以使用JS脚本控制，而@import不可以
掌握重点
四种引入方式分别是什么
各自的优缺点
优先级关系
@import与link的区别

4.盒模型

块级元素如果没有设置宽度，默认就是占满父级元素的宽度，就是100%；
如果没有设置高度，高度是被内容撑开的
![这里写图片描述](https://img-blog.csdn.net/20180120111615135?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzY5NzQ5ODE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

学习感想

有的东西不是你学了就代表你全会了，就像是CSS里的关系选择器中的后代选择器（空格）和子级选择器（>）以及其他的选择器。
有的东西不是只学皮毛就可以，小的注意点往往会影响整体的效果，比如
元素选择器中一般不使用id选择器，再比如不要轻易地使用 !important。
三十年河西三十年河东，世界发展太快，尤其是IT行业，更要与时俱进——学新增的，耍旧有的。

啊嘞嘞嘞嘞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础学习

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36974981/article/details/79111731 简介层叠样式表(级联样式表)全称: Cascading Style Sheets主要...
复制链接

扫一扫

专栏目录