CSS样式快速入门

CSS样式快速入门

前言

前端基础的博客主要分为HTML、CSS和JavaScript,本类博客主要用于记录博主的学习过程和分享学习经验,由于博主学识浅薄,经验不足,难免会出现错误,欢迎大家提出问题。
CSS样式快速入门插图

注:前端基础的文章参考于b站up主遇见狂神说的前端视频,文章中的源码笔记等资源放在百度网盘了,有需要的小伙伴可以自取啊
链接: https://pan.baidu.com/s/1I4HjfPqDUkSypvjHK1eqTw
提取码: zc49

祝大家都学有所成,下面我们进入正题!
CSS样式快速入门插图1

CSS快速入门内容总结

CSS基础的内容都在这张思维导图中了,大家可以先预览以下,后边会对每一个内容做详细的讲解
CSS样式快速入门插图2

1、什么是CSS

内容:

1.CSS是什么
2.CSS怎么用(快速入门)
3.CSS选择器(重点+难点)
4.美化网页(文字,阴影,超链接,列表,渐变…)
5.盒子模型
6.浮动
7.定位
8.网页动画(特效效果)

1.1、什么是 CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件
  • 多个样式定义可层叠为一个

1.2、发展史

  • CSS1.0

  • CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

  • CSS2.1 浮动,定位

  • CSS3.0 圆角,阴影,动画......浏览器兼容性

1.3、快速入门

练习格式:
CSS样式快速入门插图3

style:建议使用如下规范,将HTML与CSS分离开
CSS样式快速入门插图4

1.4、css的优势

  • 内容和表现分离

  • 网页结构表现统一,可以实现复用

  • 样式十分的丰富

  • 建议使用独立于HTML的CSS文件

  • 利用SEO,容易被搜索引擎收录

1.5、css的3种导入方式




    
    Title


    
    
    
    






标题

/*外部样式*/
h1{
    color: chartreuse;
}

扩展:外部样式两种写法

  • 链接式link(常用)

    
    
  • 导入式

    
        
    

2、选择器

作用:选择页面上的某一个或某一类元素

2.1、基本选择器

1.标签选择器:选择一类标签 标签{}




    
    Title
    



curry

curry

curry2

2.类选择器:选择所有class属性一致的标签,可以跨标签, .类名{}




    
    Title
    
    



11

22

33

3.id选择器:全局唯一 #id名{}




    
    Title

    



o1

o2

o3

优先级:
不遵循就近原则,id选择器>class选择器>标签选择器

2.2、层次选择器

实现如图结构
CSS样式快速入门插图5


    

p0

p1

p2

p3

  • p4

  • p5

  • p6

1.后代选择器:在某个元素的后面

/*后代选择器*/
body p{
    background: #8e72ff;
}

2.子选择器:只有一代

/*子选择器*/
body>p{
    background: red;
}

3.相邻兄弟选择器:同辈

/*相邻兄弟选择器 只有一个,向下延伸,对下不对上*/
.active + p{
    background: aqua;
}

4,通用选择器

/*通用兄弟选择器 当前选中元素的向下的所有兄弟元素 */
.active~p{
    background: darkcyan;
}

2.3、结构伪类选择器

伪类:条件




    
    Title

    


    

p0

p1

p2

p3

  • li1
  • li2
  • li3

了解:

  /*选中p1:选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效*/
       p:nth-child(1){
           background: burlywood;
       }
       /*选中父元素下类型是p的第二个元素*/
       p:nth-of-type(2){
           background: yellow;
       }

结果展示
CSS样式快速入门插图6

2.4、属性选择器(常用)

将id和class结合

/*a[]{}
属性名;属性名=属性值(可以使用正则表达式匹配)
=是绝对等于
*=是包含这个元素
^=是以等号后的值开头
$=是以等号后的值结尾
*/

实现:




    
    Title
    


1 2 3 4 5 6 7 8 9 10

结果展示
CSS样式快速入门插图7

3、美化网页元素

3.1、为什么要美化网页

1.有效的传递页面信息

2.美化网页,吸引用户

3.凸显页面的主题

4.提高用户的体验

span标签:重点要突出的字,用span标签套起来




    
    Title

    





我要学Java




3.2、字体样式


    

3.3、文本样式

1.颜色 color rgb rgba

2.文本对齐方式 text-align: center;居中

3.首行缩进 text-indent: 2em; 段落首行缩进

4.行高 line-height:单行文字上下居中 line-height = height

5.装饰 text-decoration:

6.文本图片水平对齐 vertical-align: middle;




    
    Title

    




123123

123123

123123

三体

《三体》是刘慈欣创作的长篇科幻小说系列,由《三体》《三体2:黑暗森林》《三体3:死神永生》组成,第一部于2006年5月起在《科幻世界》杂志上连载,第二部于2008年5月首次出版, 第三部则于2010年11月出版。

作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖 [1] 。

2019年,列入“新中国70年70部长篇小说典藏”。 [62]

3.4、超链接伪类

/*鼠标悬浮的颜色(只需要记住hover)*/
a:hover{
    color: #ffd95d;
}

3.5、文本阴影

阴影属性:text-shadow: aqua 10px 10px 2px;

/*text-shadow: aqua 10px 10px 2px;
               阴影颜色,水平偏移,垂直偏移,阴影半径
 */
#price{
    text-shadow: aqua 10px 10px 2px;
}

3.6、列表

实现如下网页
CSS样式快速入门插图8

HTML




    
    列表样式

    







CSS

#nav{
    width: 300px;
    background: #6e4a31;
}


.title{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: crimson;
}

/*ul  li*/
/*list-style: none;     去掉圆点
              circle    空心圆
              decimal   数字
              square    正方形

*/

ul{
    background: #6e4a31;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: #ffd95d;
    text-decoration: underline;
}

3.7、背景

  • 背景颜色
  • 背景图片

3.8、渐变

这里推荐一个渐变色比较好用的网站:https://www.grabient.com/

background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);

4、盒子模型

4.1、什么是盒子模型

CSS样式快速入门插图9

  • margin:外边距
  • border:边框
  • padding:内边距

4.2、边框

1.边框的粗细

2.边框的样式

3.边框的颜色

    

4.3、内外边距




    
    Title

    




会员登录

姓名:
密码:
邮箱:

盒子的计算方式:这个元素到底多大

CSS样式快速入门插图10

margin+border+padding

4.4、圆角边框

4个角




    
    Title
    


CSS样式快速入门插图11

4.5、盒子阴影




    
    Title

    




5、浮动

5.1、标准文档流

块级元素:独占一行

  • h p div 列表...

行内元素:不独占一行

  • span a img strong...

行内元素可以被包含在块级元素中,反之不可以

5.2、display




    
    Title


    


div块元素
span行内元素

display也是一种实现行内元素排列的方式,但是我们很多情况都是使用float

5.3、float 属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动(将显示在文本中刚出现的位置)。默认值。
  • inherit - 元素继承其父级的 float 值

最简单的用法是,float 属性可实现(报纸上)文字包围图片的效果。

下例指定图像应在文本中向左浮动:
CSS样式快速入门插图12

img {
  float: left;
}

5.4、父级边框塌陷的问题

clear:

  • clear:right;右侧不允许有浮动元素
  • clear:leftt;左侧不允许有浮动元素
  • clear:both;两侧不允许有浮动元素(排到下一行)

overflow

overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值:

  • visible - 默认。溢出没有被剪裁。内容在元素框外渲染
  • hidden - 溢出被剪裁,其余内容将不可见
  • scroll - 溢出被剪裁,同时添加滚动条以查看其余内容
  • auto - 与 scroll 类似,但仅在必要时添加滚动条

注释:overflow 属性仅适用于具有指定高度的块元素。

解决方案:

  1. 增加父级元素的高度

    简单,但是元素假设有了固定的高度就会被限制

  2. 增加一个空的div标签清除浮动

    简单,代码中尽量避免空div

  3. overflow(在父级元素增加一个overflow:hidden)

    简单,下拉的一些场景会是网页不美观

  4. 父类添加一个伪类:after(推荐使用)

#father: after{
    content'';
    display: block;
    clear: both;
}

5.5、对比

  • display

  • 方向不可以控制

  • float

    浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题

    6、定位

6.1、相对定位




    
    Title

    





第一个盒子
第二个盒子
第三个盒子

相对定位: position: relative;

相对于原来的位置进行指定的偏移,相对定位的话,他仍然在标准文档流中,原来的位置会被保留

 position: relative;/*相对定位:上下左右*/
            top: -20px;/*向上移*/
            left: 20px;/*向右移*/
            bottom: -10px;/*向下移*/
            right: 20px;/*向左移*/

练习:

实现如下图
CSS样式快速入门插图13




    
    Title

    








6.2、绝对定位

定位:基于XX定位,上下左右

  • 没有父级元素定位的前提下,相对于浏览器定位

  • 假设父级元素存在定位,我们通常会相对于父级元素进行偏移

  • 在父级元素范围内移动

  • 相对于父级元素或浏览器进行指定的偏移,绝对定位的话,他不在标准文档流中,原来的位置不会被保留

    
    
    
        
        Title
    
        
    
    
    
    
    第一个盒子
    第二个盒子
    第三个盒子

6.3、固定定位




    
    Title

    




div1
div2

6.4、z-index

图层

z-index:默认是0,最高无限

html




    
    Title

    



  • CSS样式快速入门插图14
  • 学习框架
  • 2022年6月29日19:34:12
  • 地点:火星

css

#content{
    width: 600px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}

ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}

.tipText,.tipBg{
    position: absolute;
    width: 600px;
    height: 60px;
    color: red;
    top: 316px;

}
.tipText{
    color: #280607;
    z-index: 1;/*显示在tipBg上  层级的概念*/
}

.tipBg{
    background: #44ff00;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);!*背景透明度*!*/
}

好啦,CSS快速入门的文章到这里就结束了,大家觉得还可以的话帮帮忙点个推荐吧
CSS样式快速入门插图15

文章来源于互联网:CSS样式快速入门

THE END
分享
二维码