CSS 入门

MasonEast 发布于2019-08-02 10:54 / 399人阅读

摘要：运行结果选择器实例选择器这个标题居中这个段落居中。如果需要更多的信息，请关注我，我会持续更新。

一、CSS简介 1.什么是css

css指层叠样式表（ascading Style Sheets）

样式定义如何显示HTML样式

样式通常储存在样式表中

外部样式表可以极大的提高工作效率

实际就是学习选择器和css属性

2.CSS语法

选择器{属性：属性值;属性：属性值;}
div{color:blue;font-size:20px;}

实例1：

实例

这个标题设置的大小为 40 px

这个标题设置的颜色为蓝色：blue

这个段落的左外边距为 50 像素：50px

运行结果：

实例2：

实例2

这是标题

你可以看到这个段落是被设定的 CSS 渲染的。

这是一个链接

运行结果：

3.id和class选择器

如果你需要在HTML里设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id选择器实例：

选择器

Hello World!

这个段落不受该样式的影响。

运行结果： class选择器实例：

选择器

这个标题居中

这个段落居中。

运行结果：

二、CSS基础 1.文本

color:#fff; 修饰字体颜色

text-align:left/center/right/justify 设置文本对齐

text-indent:2em; 设置文本缩进

2.字体

font-family:Microsoft YaHei; 改变字体样式

font-size:14px; 修改文字大小

font-weight:blod; 字体加粗

3.链接

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

4.列表样式（ul）

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 - 列表项的标记有数字或字母

使用css，可以列出进一步的样式，并可用图形做列表项标记

实例

列表样式

无序列表实例:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

有序列表实例:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

运行结果：

总结

本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。
你已经学会了如何使用CSS来添加背景、文字样式、以及链接样式，并定义列表样式。
如果需要更多CSS的信息，请关注我，我会持续更新。

GPU云服务器云服务器 css入门 css快速入门 css入门到精通 css入门教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52631.html

前端学习资源整理

稍微整理了一下自己平时看到的前端学习资源，分享给大家。 html MDN：Mozilla开发者网络 SEO：前端开发中的SEO css 张鑫旭：张鑫旭的博客 css精灵图：css精灵图实践栅格系统：详解CSS中的栅格系统媒体查询：css媒体查询用法 rem布局：手机端页面自适应布局移动前端开发之viewport的深入理解:深入理解viewport 淘宝前端布局：手机淘宝移动端布局 fl...

siberiawolf 2019-08-21 11:27 评论0 收藏0
webpack入门学习手记（五）

摘要：另外需要指定这个参数，表示在配置的数值以下的图片才进行编码，超过的不进行处理。代码如下所以过程就是引入了，然后进行打包处理，生成和。目前这个入门学习手记到这里就结束了。完相关文章入门学习手记一入门学习手记二入门学习手记三入门学习手记四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

AlphaWatch 2019-08-26 10:13 评论0 收藏0
webpack -> vue Component 从入门到放弃（二）

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

DobbyKim 2019-08-20 14:37 评论0 收藏0
webpack -> vue Component 从入门到放弃（二）

摘要：我们可以根据模块类型扩展名来自动绑定需要的。当需要加载的文件匹配的正则时，就会调用后面的对文件进行处理，这正是强大的原因。这篇就这样吧，感觉进度有点慢从入门到放弃四从入门到放弃一从入门到放弃三源代码 Foreword 上一篇简单介绍了webpack的打包功能，应该说是比较无意义的打包，对于开发人员来说，这种效率是非常低的。所以我们来点升华。 First Step 我们给第一篇例子中加个...

xiaochao 2019-08-01 16:23 评论0 收藏0
CSS入门之引用、选择器、属性（六分之三）

摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。 CSS 入门教程六分之三篇没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点解释引用如...

baishancloud 2019-08-30 15:54 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0