新手学web之CSS快速了解及入门
2017-09-26 15:34
239 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zero_1999/article/details/78095986
1.1 CSS简介
层叠样式表
1.1.1 css使用的三种方式:
1) 在html标签的style属性中编辑 2) 在html的<head>内部使用<style>标签
示例:
<style> /*ID选择器*/ #c{ letter-spacing: 20px; } /*标签选择器*/ a{ color: black; } /*类选择器*/ .abc{ color: red; } .test{ Font-size: 18px; } </style> <a href="#" id="c" class="abc test">首页</a>
三种选择器的优先级:
ID选择器 > 类选择器 > 标签选择器
规则:
一个标签可以使用多个类修饰,但是只能有一个ID
3) 使用外部 .css文件(推荐)
<link rel="stylesheet" href="css/index.css" /> 注:三种CSS的编辑方式,以就近原则来显示
1.1.2 选择器扩展
a:hover{} 伪类选择器 div,p 同时选择<div>和<p>,二者是平行关系 div p 选择<div>标签内的<p>标签
1.1.3 伪类选择器
a:hover 鼠标悬停 a:link 未访问的样式 a:visited 已访问的样式 a:active 鼠标按下的样式(未松开)
1.2 常用属性
1.2.1 文字修饰 color颜色 font-family字体 font-size字体大小 font-weight粗细 letter-spacing字间距 1.2.2 文本修饰 text-indent 文字缩进 text-align 对齐方式 line-height 行高 1.2.3 盒子模型 外边距(margin) margin: 10px 20px 30px 40px; 上、右、下、左 margin: 10px 20px 30px ; 上、左右、下 margin: 10px 20px; 上下、左右 margin: 10px; 四周 边框(border) border-方位(bottom、top、left、right) border-style 边框的样式 内边距(padding) 参考外边距 1.2.4 定位 固定定位 position:fixed; 调整位置:top、left、right、bottom 相对定位 position: relative; 未脱离流布局; 绝对定位 position: absolute; 相对于最近的已定位的父元素,脱离流布局; 1.2.5 层叠顺序 z-index 值为数字,数字越大,层次越高; 1.2.6 列表样式 list-style: none; 取消列表样式 1.2.7 元素溢出 overflow: hidden; 溢出部分隐藏 1.2.8 圆角 border-radius: 值; 值可以为像素或百分比 1.2.9 滚动 <marquee > 要滚动的文字或图片 </marquee> 常用属性: behavior:设定滚动的方式 alternate: 表示在两端之间来回滚动 scroll:表示由一端滚动到另一端,会重复。 slide:表示由一端滚动到另一端,不会重复。 direction:设定活动字幕的滚动方向up向上滚动,down向下滚动,left向左滚动,right向右滚动 height:设定滚动字幕的高度 width: 设定滚动字幕的宽度 scrollamount:设定滚动速度,属性值为正整数,值越大滚动速度越快
相关文章推荐
- 新手学web之JavaScript快速了解及入门
- 简单快速了解gcc(新手入门)
- JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署
- web前端之css快速入门
- 【WEB基础】HTML & CSS 基础入门(1)初识
- Web基础知识二之Html快速入门
- Spring MVC 教程,快速入门,深入分析――如何访问到静态的文件,如jpg,js,css?
- Android新手入门应了解的那些知识
- web前端开发分享-css,js入门篇(转)
- Mybatis快速入门—新手Mybatis详细配置步骤介绍
- 新手入门:了解网络应用与网络协议
- 【WEB基础】HTML & CSS 基础入门(9)CSS盒子
- 【WEB基础】HTML & CSS 基础入门布局与定位
- 1. web前端开发分享-css,js入门篇
- 新手入门:了解网络应用与网络协议
- 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频 - Scott Hanselman的中文博客【转载】
- 实际项目中,为什么多个css、js文件要实现合并与压缩?(了解了这你才算入门)
- 快速入门Web阅读器开发——1学习目标
- HTML5快速入门(二)—— CSS简介
- go语言快速入门:Web应用的HelloWorld(11)