JAVAWEB基础知识——CSS篇

最新推荐文章于 2023-07-07 21:28:43 发布

猫爷阿呆

最新推荐文章于 2023-07-07 21:28:43 发布

阅读量704

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_42433978/article/details/122510214

版权

1.什么是CSS？

2.CSS的优势

3.CSS基本语法结构

4.HTML引入CSS样式的三种方法

4-1行内样式

直接在标签内使用style属性引入CSS样式

案例：<h1 style="color: green;">aaa</h1>

4-2内部样式

在<head>...</head>标签中引入<style type="text/css">...</style>

案例：

<style type="text/css">
           h2{
               color: #000033;
               font-size: 28px;
               border:1px solid blue ;
           }
</style>

4-3外部样式

（1）链接外部样式表

新创建css文件，在<head>...</head>标签中引入<link rel="stylesheet" href="路径" type="text/css"/>

案例：

创建css文件demo1.css，在css文件中写以下内容：

div{
   font-size: 90px;
   color: yellow;

}

在html文件的<head>...</head>标签中写出以下内容：

<link href="css/demo1.css" type="text/css" rel="stylesheet"/>

（2）导入外部样式表（不常用）

案例：

<style type="text/css">
           @import url("css/demo1.css");
</style>

5.CSS样式优先级

行内样式>内部样式>外部样式

6.CSS三个常用的基本选择器

        1.标签选择器

        2.类选择器

        3.ID选择器

         4.基本选择器的优先级

ID选择器>类选择器>标签选择器

7.CSS的高级选择器

        1.层次选择器

        2.结构伪类选择器

        3.属性选择器

8.span标签的作用

9.字体样式

10.文本样式

小技巧：

设置height与line-height的值相等，可使文本上下行高一致，垂直居中

11.超链接伪类

12.列表样式

用法： list-style-image:url('图像路径'); 设置列表项标记的图像

13.背景样式

14.盒子模型

（1）边框

（2）外边距

（3）内边距

（4）盒子模型的尺寸

（5）盒子的两种类型

（6）圆角边框

（7）盒子阴影

15.浮动

（1）标准文档流

（2）float浮动

（3）边框塌陷

（4）解决边框塌陷的四种方法

（4-1）

（4-2）

（4-3）

（4-4）

（4-5）小结

16.弹性盒子（现在一般用这个）

（1）盒子模型的两种类型

（2）弹性盒子使用方式

（3）justify-content 水平排列

（4）align-item垂直排列

（5）flex-direction灵活项目的方向

（6）

17.定位网页元素

（1）定位

（2）相对定位

（3）绝对定位

（4）固定定位

（5）z-index属性

（6）网页元素透明度

猫爷阿呆

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB基础知识——CSS篇

1.什么是CSS？2.CSS的优势3.CSS基本语法结构4.HTML引入CSS样式的三种方法4-1行内样式直接在标签内使用style属性引入CSS样式案例：<h1 style="color: green;">aaa</h1>4-2内部样式在<head>...</head>标签中引入<style type="text/css">...</style>案例：<style type=...
复制链接

扫一扫