CSS+CSS3简单复习

暮w光

已于 2022-01-20 17:16:54 修改

阅读量142

点赞数

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

于 2021-08-22 00:15:19 首次发布

本文链接：https://blog.csdn.net/qi_SJQ_/article/details/119827589

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

并未记录css如何实现页面的美化效果。

一、CSS：

1.css格式：
请添加图片描述
2.id和class选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

外部样式表：<link> 标签在（文档的）头部。
内部样式表：使用 <style> 标签在文档头部定义。
内联样式：在单个元素使用，但也要加style属性

优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

4. 在这里插入图片描述

5.css盒子模型：

6.
CSS 分组和嵌套选择器：
https://www.runoob.com/css/css-grouping-nesting.html

隐藏元素 - display:none或visibility:hidden

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>

8.CSS 组合选择符：

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～分隔）

https://www.runoob.com/css/css-combinators.html

9.伪类：

参考：https://www.runoob.com/css/css-pseudo-classes.html

10.伪元素：

参考：https://www.runoob.com/css/css-pseudo-elements.html

在这里插入图片描述

11.导航栏设计：
https://www.runoob.com/css/css-navbar.html

12.下拉菜单设计：
https://www.runoob.com/css/css-dropdowns.html

13.提示文本：
https://www.runoob.com/css/css-tooltip.html

14.CSS 属性选择器：

[title]
{
    color:blue;
}

加了对 " [ "、 " ] " 符号。

5.css计数器：
https://www.runoob.com/css/css-counters.html

16.css网页布局：
请添加图片描述

https://www.runoob.com/css/css-website-layout.html

17.CSS !important 规则：

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。但用它不是一个好习惯。

CSS实例：https://www.runoob.com/css/css-examples.html

二.CSS3:

1.CSS3 @font-face 规则：（自定义字体）

https://www.runoob.com/css3/css3-fonts.html

2.CSS3 2D 转换：

translate()
rotate()
scale()
skew()
matrix()

3.CSS3 3D 转换：

rotateX()
rotateY()

4.CSS3 过渡：
它是只元素从一种样式逐渐改变为另一种的效果。

参考：https://www.runoob.com/css3/css3-transitions.html

5.CSS3 @keyframes 规则：（动画）

动画是使元素从一种样式逐渐变化为另一种样式的效果。

参考：https://www.runoob.com/css3/css3-animations.html

6.CSS3 分页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
</style>
</head>
<body>

<h2>简单的分页</h2>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>

</body>
</html>

实现更多效果参考：https://www.runoob.com/css3/css3-pagination.html

7.CSS3 弹性盒子：

https://www.runoob.com/css3/css3-flexbox.html

8.多媒体查询： @media

https://www.runoob.com/css3/css3-mediaqueries.html

实例：https://www.runoob.com/css3/css3-mediaqueries-ex.html

css参考手册：

https://www.runoob.com/cssref/css-reference.html

暮w光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+CSS3简单复习

并未记录css如何实现页面的美化效果。一、CSS：1.css格式：2.id和class选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以clas
复制链接

扫一扫

专栏目录