CSS概述（学习菜鸟教程随笔）

最新推荐文章于 2019-03-27 09:40:38 发布
最新推荐文章于 2019-03-27 09:40:38 发布
阅读量213 收藏
点赞数
分类专栏： ***CSS + CSS3***Study***
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30796379/article/details/88624302
版权

使用 CSS 同时控制多重网页的样式和布局；

HTML/CSS/JS在线工具；

什么是 CSS?

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

各种注释方式：

Python：#；

C/C++：单行：//，多行：/*……*/；

JAVA：单行：//，多行：/*……*/；

JAVAScript：单行：//，多行：/*……*/；

HTML：<!--……-->；

CSS：/*……*/；

hhjian6666
关注
专栏目录
CSS学习经典教程
01-24
【CSS学习经典教程】是一份专为初学者和有一定基础的学习者设计的教程，旨在帮助他们深入理解并熟练掌握CSS（层叠样式表）技术。CSS是网页设计中不可或缺的一部分，用于控制网页元素的布局、颜色、字体、大小等视觉...
css干货教学，你想了解的全都有！！
zihong523的博客
06-26 300
CSS简介：初识CSS 一.我们为什么需要CSS？ 使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。 CSS的出现解决了下面两个问题： 将HTML页面的内容与样式分离。 提高web开发的工作效率 二，什么是CSS？ CSS是指层叠样式表(Cascading S
CSS教程(5)：通过实例学习CSS背景
12-10
参考软件开发网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识。 1、如何使用像素来定位背景图像 本例演示如何使用像素来在页面上定位背景图像。 <html><head><style type="text/css">...
菜鸟教程CSS的思维导图
04-21
依据菜鸟教程的CSS/HTML/JS教程，自制思维导图，内容和博客上的内容一样，xmind的可以使用超链接有助于，随时查阅菜鸟教程的资料，只是作者自制的思维导图，若有侵权，请告知，立即删除。
css教程教学欢迎大家学习
最新发布
07-08
css教程教学欢迎大家学习
CSS教程:学习CSS的继承性
12-07
所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间...
CSS学习，常用常记（轮廓outline，外边距margin，填充padding）
Sinhaeng_Hhjian
03-20 1385
CSS轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，起突出元素作用； 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 p { border:1px solid red; outline:green dotted thick; } p {border:1px solid red;} p.dotted {outline-styl...
CSS学习，常用常记（伪元素，导航栏）
Sinhaeng_Hhjian
03-22 593
CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法： selector:pseudo-element {property:value;} CSS类也可以使用伪元素： selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 p:fir...
CSS学习，常用常记（媒体类型，属性选择器，实例）
Sinhaeng_Hhjian
03-23 566
媒体类型允许你指定文件将如何在不同媒体呈现。 该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 媒体类型 一些 CSS 属性只设计了某些媒体。例如voice-family属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，font-size属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif字体比较适...
CSS学习，常用常记（定位Position，Overflow，浮动Float）
Sinhaeng_Hhjian
03-20 478
position 属性指定了元素的定位类型； 元素可以使用的顶部，底部，左侧和右侧属性定位； 然而，这些属性无法工作，除非是先设定position属性； 他们也有不同的工作方式，这取决于定位方法； static 定位 HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。 div.static { ...
CSS3学习，常用常记（渐变）
Sinhaeng_Hhjian
03-24 372
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradi...
CSS学习，常用常记（选择器，样式表，设置背景）
Sinhaeng_Hhjian
03-17 365
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charse...
CSS3学习，常用常记（分页，框大小，弹性盒子）
Sinhaeng_Hhjian
03-27 362
简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。 点击及鼠标悬停分页样式 点击当前页，使用.active来设置当期页样式，鼠标悬停可以使用:hover选择器来修改样式： 圆角样式 可以使用border-radius属性为选中的页码来添加圆角样式: 鼠标悬停过渡效果 我们可以通过添加transition属性来为鼠标移动到页码上时添加过渡效果: ...
CSS学习，常用常记（下拉菜单，提示工具，）
Sinhaeng_Hhjian
03-23 361
响应式顶部导航：如何使用 CSS3 媒体查询来创建一个响应式导航。 响应式边栏导航：如何使用 CSS3 媒体查询来创建一个边栏导航。 导航下拉菜单：在导航条内部设置下拉菜单 基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 <!DOCTYPE html> <html> <head> <title>下拉菜单实例|菜鸟教程(runoo...
CSS学习，常用常记（图片廊，图像透明/不透明，图像拼合）
Sinhaeng_Hhjian
03-23 339
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div.img { margin: 5px; border: 1px solid #ccc; ...
CSS学习，常用常记（文本，字体，链接）
Sinhaeng_Hhjian
03-18 328
body {color:red;} 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。 文本的对齐方式 文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸） 文本修饰 text-decoration 属性用来设置或删除文本的装饰。...
CSS3学习，常用常记（过渡，动画，多列）
Sinhaeng_Hhjian
03-26 316
CSS3 过渡 我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 它是如何工作？ CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容： 指定要添加效果的CSS属性 指定效果的持续时间。 div{ width:100px; height:100px; background:red; transi...
CSS3学习，常用常记（边框，圆角，背景）
Sinhaeng_Hhjian
03-24 308
CSS3 边框 用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。 CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中，很容易创建圆角。 在 CSS3 中 border-radius 属性被用于创建圆角； div{ border:2px solid #a1a1a1; paddin...
CSS3学习，常用常记（文本效果，字体）
Sinhaeng_Hhjian
03-26 281
CSS3 的文本阴影 CSS3 中，text-shadow属性适用于文本阴影。 您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色； h1{text-shadow: 5px 5px 5px #FF0000;} CSS3 box-shadow属性 CSS3 中 CSS3 box-shadow 属性适用于盒子阴影； div{ width:300px; height:100p...
CSS案例教程：浮动布局与新手入门
在学习这个CSS案例教程的过程中，初学者不仅会掌握浮动布局的技巧，还会了解如何组织和设计页面结构，以及如何通过CSS优化页面的可读性和用户体验。此外，通过实际动手操作，学习者可以加深对CSS选择器、属性和值的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hhjian6666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值