![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
***CSS + CSS3***Study***
文章平均质量分 92
hhjian6666
路漫漫其修远兮,吾将上下而求索。修远兮,求索兮。
展开
-
CSS学习,常用常记(列表,表格,盒子模型,边框border)
CSS列表设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像ul.a {list-style-type:circle;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}ul { list...原创 2019-03-19 22:09:58 · 245 阅读 · 0 评论 -
CSS学习,常用常记(伪元素,导航栏)
CSS伪元素是用来添加一些选择器的特殊效果。语法伪元素的语法:selector:pseudo-element {property:value;}CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;}:first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。p:fir...原创 2019-03-22 20:09:39 · 562 阅读 · 0 评论 -
CSS学习,常用常记(下拉菜单,提示工具,)
响应式顶部导航:如何使用 CSS3 媒体查询来创建一个响应式导航。 响应式边栏导航:如何使用 CSS3 媒体查询来创建一个边栏导航。 导航下拉菜单:在导航条内部设置下拉菜单基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单。<!DOCTYPE html><html><head> <title>下拉菜单实例|菜鸟教程(runoo...原创 2019-03-23 09:55:20 · 333 阅读 · 0 评论 -
CSS学习,常用常记(图片廊,图像透明/不透明,图像拼合)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div.img { margin: 5px; border: 1px solid #ccc; ...原创 2019-03-23 17:33:10 · 332 阅读 · 0 评论 -
CSS学习,常用常记(媒体类型,属性选择器,实例)
媒体类型允许你指定文件将如何在不同媒体呈现。 该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等。媒体类型一些 CSS 属性只设计了某些媒体。例如voice-family属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如,font-size属性可用于屏幕和印刷媒体,但有不同的值。屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif字体比较适...原创 2019-03-23 17:59:54 · 553 阅读 · 0 评论 -
CSS3学习,常用常记(过渡,动画,多列)
CSS3 过渡我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。它是如何工作?CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性 指定效果的持续时间。div{ width:100px; height:100px; background:red; transi...原创 2019-03-26 20:49:11 · 307 阅读 · 0 评论 -
CSS3学习,常用常记(用户界面,图片,按钮)
CSS3 用户界面在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。CSS3 调整尺寸(Resizing)CSS3中,resize属性指定一个元素是否应该由用户去调整大小。 这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)div{ border:2px solid; padding:10px 4...原创 2019-03-26 21:41:31 · 223 阅读 · 0 评论 -
CSS3概述(查阅菜鸟教程随笔)
CSS3 模块CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。一些最重要CSS3模块如下:选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面...原创 2019-03-23 21:41:12 · 146 阅读 · 0 评论 -
CSS3学习,常用常记(分页,框大小,弹性盒子)
简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。点击及鼠标悬停分页样式点击当前页,使用.active来设置当期页样式,鼠标悬停可以使用:hover选择器来修改样式:圆角样式可以使用border-radius属性为选中的页码来添加圆角样式:鼠标悬停过渡效果我们可以通过添加transition属性来为鼠标移动到页码上时添加过渡效果:...原创 2019-03-27 09:40:38 · 356 阅读 · 0 评论 -
CSS3学习,常用常记(2D转换(4),3D转换(2))
CSS3 转换CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。它是如何工作?转换的效果是让某个元素改变形状,大小和位置。2D 转换translate() 方法左上角为原点,从左到右是X轴正方向,从上到下是Y轴正方向,从当前元素位置移动。div{ transform: translate(50px,100px); -ms-transform...原创 2019-03-26 11:39:21 · 246 阅读 · 0 评论 -
CSS3学习,常用常记(文本效果,字体)
CSS3 的文本阴影CSS3 中,text-shadow属性适用于文本阴影。您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色;h1{text-shadow: 5px 5px 5px #FF0000;}CSS3 box-shadow属性CSS3 中 CSS3 box-shadow 属性适用于盒子阴影;div{ width:300px; height:100p...原创 2019-03-26 11:02:02 · 269 阅读 · 0 评论 -
CSS学习,常用常记(文本,字体,链接)
body {color:red;}对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。文本的对齐方式文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)文本修饰text-decoration 属性用来设置或删除文本的装饰。...原创 2019-03-18 22:02:17 · 300 阅读 · 0 评论 -
CSS学习,常用常记(轮廓outline,外边距margin,填充padding)
CSS轮廓(outline)轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,起突出元素作用; 轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。p { border:1px solid red; outline:green dotted thick;}p {border:1px solid red;}p.dotted {outline-styl...原创 2019-03-20 12:30:08 · 1325 阅读 · 0 评论 -
CSS学习,常用常记(分组和嵌套,尺寸Dimension,显示Display与可见性Visibility)
分组选择器在样式表中有很多具有相同样式的元素,为了减少代码,可以使用分组选择器,逗号分隔;h1,h2,p{ color:green;}嵌套选择器p{ }: 为所有p元素指定一个样式。 .marked{ }: 为所有class="marked"的元素指定一个样式。 .marked p{ }: 为所有class="marked"元素内的p元素指定一个样式。 ...原创 2019-03-20 16:10:52 · 230 阅读 · 0 评论 -
CSS学习,常用常记(定位Position,Overflow,浮动Float)
position 属性指定了元素的定位类型; 元素可以使用的顶部,底部,左侧和右侧属性定位; 然而,这些属性无法工作,除非是先设定position属性; 他们也有不同的工作方式,这取决于定位方法;static 定位HTML 元素的默认值,即没有定位,遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。div.static { ...原创 2019-03-20 22:23:41 · 438 阅读 · 0 评论 -
CSS概述(学习菜鸟教程随笔)
使用 CSS 同时控制多重网页的样式和布局;HTML/CSS/JS在线工具;什么是 CSS?CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在CSS 文件中 多个样式定义可层...原创 2019-03-17 19:13:34 · 202 阅读 · 0 评论 -
CSS学习,常用常记(选择器,样式表,设置背景)
id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。<!DOCTYPE html><html><head> <meta charse...原创 2019-03-17 20:05:54 · 334 阅读 · 0 评论 -
CSS3学习,常用常记(边框,圆角,背景)
CSS3 边框用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中,很容易创建圆角。 在 CSS3 中 border-radius 属性被用于创建圆角;div{ border:2px solid #a1a1a1; paddin...原创 2019-03-24 21:12:59 · 294 阅读 · 0 评论 -
CSS3学习,常用常记(渐变)
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients):线性渐变(Linear Gradi...原创 2019-03-24 22:08:23 · 341 阅读 · 0 评论 -
CSS学习,常用常记(对齐,组合选择符,伪类)
元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用margin: auto; 设置到元素的宽度将防止它溢出到容器的边缘; 元素通过指定宽度,并将两边的空外边距平均分配;.center { margin: 0 auto; width: 60%; border: 3px solid #73AD21; padding: 10px;...原创 2019-03-21 21:00:32 · 228 阅读 · 0 评论 -
CSS3学习,常用常记(多媒体查询,多媒体查询实例)
CSS2 多媒体类型@media规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。 例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。 但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想: 取代了查找设备的类型,CSS3 根据设置自适应显示。媒体查...原创 2019-03-27 10:04:20 · 249 阅读 · 0 评论