CSS3的学习（前端）没记完

多吃肉肉a

于 2021-06-08 11:22:14 发布

阅读量119

点赞数

分类专栏： Java学习

本文链接：https://blog.csdn.net/qq_38377946/article/details/117395640

版权

Java学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基础知识，包括层叠样式表的使用、选择器的运用、网页美化技巧和样式表的三种导入方式。重点讲解了行内样式、内部样式和外部样式（链接式link），并探讨了选择器的分类，如标签选择器、类选择器和ID选择器。此外，还讨论了如何通过CSS进行文字、超链接、阴影等元素的美化，以及盒子模型、浮动和定位的概念。建议使用独立的CSS文件以实现内容与表现的分离，提高SEO效果。

摘要由CSDN通过智能技术生成

CSS：Cascading style sheet 层叠级联样式表

什么是CSS
如何使用CSS
CSS选择器（重点难点）
美化网页（文字、阴影、超链接、列表、渐变…）
盒子模型
浮动
定位

快速入门
新建一个CSS的工程，新建lesson---->我的第一个css程序----->css的directory和 index的HTML
不分离：
在这里插入图片描述
分离之后，内容和表现分离

CSS的优势：
内容与表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于HTML的css文件
利用SEO，容易被搜索引擎收录

三种导入方式
1.行内样式

<body>

<!--导入方式1：行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aqua">行内样式</h1>

</body>
</html>

2.内部样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入方式2：内部样式-->
  <style>
    h1  {
      color: green;
    }
  </style>

 
</head>

3.外部样式分离，链接式 link

优先级比较：就近原则

拓展，外部样式的第二种写法
导入式@不建议

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    @import url("css.css");
  </style>

</head>

2.选择器

选择页面上的某一种或者某一类元素

2.1基本选择器

1.标签选择器选择一类标签标签{}
2.类选择器 class 选中class属性一致的标签，可以跨标签 .类名{}
3.id选择器全局唯一 #id名 {}
优先级不遵循就近原则，固定的 id选择器>class选择器>标签选择器

2.2 层次选择器

在这里插入图片描述

2.3 结构伪类选择器

2.4 属性选择器（常用）

在这里插入图片描述

3.美化网页元素

span 标签：重点要突出的字，用span套起来

1.字体样式
在这里插入图片描述
2.文本样式
颜色：单词（red ,blue…） RGB (0~F), RGBA(A 是透明度，0-1)
对齐方式： text-aligh（排版 center居中）
首行缩进： text-ident ：2em(段落首行缩进两个字符)
行高：height line-height 块的高度
装饰：text_decoration：(underline…)

3.文本阴影和超链接
阴影 text-shadow(颜色，水平偏移，垂直偏移，模糊度)
超链接伪类
在这里插入图片描述
省略有的没的

多吃肉肉a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的学习（前端）没记完

CSS：Cascading style sheet 层叠级联样式表什么是CSS如何使用CSSCSS选择器（重点难点）美化网页（文字、阴影、超链接、列表、渐变…）盒子模型浮动定位快速入门新建一个CSS的工程，新建lesson---->我的第一个css程序----->css的directory和 index的HTML...
复制链接

扫一扫