专栏首页萌兔itCSS入门总结(上)

CSS入门总结(上)

Hello小伙伴们~~经过上一篇的学习相信大家已经知道该怎么构造一个Web页面啦,但是怎么做一个美美哒的页面呢,今天就有请我们CSS大宝贝粉墨登场啦~~当当~~

CSS到底是什么呢,学名叫做层叠样式表,就像兔妞的化妆品一样,我们用它给网页画个妆~有了HTML的知识基础,我们就开始CSS的学习吧!

CSS的语法呢,其实很简单,由两部分组成:选择器和声明。还记得HTML中我们所提到的class和id吗,这里就派上用场了,选择器呢就是通过class、id、标签名称等方法来获取到元素,声明呢就是给元素设置自己想要的样子,烟熏妆还是甜美妆,画眼影还是涂口红自己说了算~举个例子吧!

没有设置样式的时候是默认的黑色字,左对齐,我们设置个颜色,就变成了蓝色:

是不是很有意思呢~~下面让们具体看看详细的语法吧~

要想使用,我们要先知道怎样创建CSS,共有三种创建CSS的方式:外部样式表、内部样式表和内联样式表:

(1)外部样式表:比较适合用在某个样式可以同时应用于好多个页面时,写在文件里,直接通过<link>引用文件而不必重新写样式了,饮用的页面会将css文件中的样式解析形成内部样式

<head>

<link rel="stylesheet" type="text/css" href="mengtu.css">

</head>

(2)内部样式表:当某些元素只有当前页面有的时候,我们可以直接写在当前页面,写于<style>标签中间即可

<head>

<style>

* {color:blue;}

</style>

</head>

(3)内联样式表:它其实是一种比较不推荐的样式表现方式,直接写在html标签中,还记得style属性吗,没错就是它,style属性可以包含任何的css属性,但是这会将html于css混合在一起,代码阅读起来比较混乱。

<p style="color:blue;margin-left:20px">mengtuit</p>

好啦,我们已经了解了怎样创建CSS,那么有的宝宝会产生疑问了,这么多种创建方式,如果同时使用,浏览器会听谁的呢?这个时候就有了这样一套规则:内联样式>内部样式>外部样式>浏览器默认样式

下面介绍一下选择器,通用选择器:*{}(可以通用适配于所有元素);元素选择器:p{};id选择器:#tutu{};class选择器.tutu{};伪类选择器::hover;等等。

举个?:先在html中声明,再通过选择器调用:

见到了这么多选择器,又会有宝宝问了,假如通过不同选择器定位到了相同元素并且设置了样式该听谁的呢。那么优先级顺序就是这样滴:

通用选择器 < 伪元素选择器 = 元素选择器1 < 伪类选择器 = 属性选择器 = 类选择器10 < id选择器100 < 内联样式1000,还有一个捣蛋分子:!important,它绝对是样式声明中的大哥大,有了它无论什么选择器什么创建方式都会被覆盖掉,这也就是为什么大家都说要慎用!important了。大家应该也看到了上面的选择器后面有个数字,这代表的是权重,选择器是可以叠加的,比如#tutu .tutu p{}这个时候我们就要通过计算权值来确定谁的优先级高了,权值越大优先级越高,想这个权重就是100+10+1=111。

ok,目前为止,相信大家对CSS已经有个一个初步的认识,那么下面就为大家介绍一些常用的CSS吧,相信掌握了这些做一个简单的页面就不成问题了~~

(1)通用

宽度:width;width: 100px;

高度:height;height: 100px;

定位:position;position: absolute/relative/inherit/fixed;

浮动:float;float: right/left/top/bottom;

背景:background;background-color: #EEE;

(2)盒子相关:这里为大家介绍一下盒子模型,所有的HTML元素都可以看作一个盒子,包括边距,边框,填充,和实际内容,盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。这里需要注意的是,在IE浏览器中盒模型的宽高包含padding,而在其他浏览器中则不包含,可以通过box-sizing来改变。

外边距:margin;margin: 0 10px 0 5px;

填充:padding;padding: 0 20px 10px 20px;

边框:border;border: 1px solid #eee;

(3)字相关

字体:font-family;font-family: "Times New Roman", Times, serif;

字号:font-size;font-size: 16px;

粗细:font-weight;font-weight: bold;

对齐方式:text-align;text-align: center;

字色:color;color: blue;

好了,说到这里,大家是否对CSS有了最基础的认识了呢,通过使用上面的属性,是不是可以试着自己做一个美美的页面了呢。上一篇我们说了现在流行使用html5,对于CSS呢,CSS3则更为好用,因为有更多好用的属性,那么下一篇我们就要开始CSS3的介绍了呢~

本文分享自微信公众号 - 萌兔it(mengtu_it)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-02-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 给CSS加点料——Less(一)

    它是Leaner Style Sheets的缩写,是一门向后兼容的CSS扩展语言,我们今天就来看看他是个什么鬼!兔妞将从定义、安装、语言特性、函数、用法五个方面...

    萌兔IT
  • JavaScript入门总结——第二弹学习对象,分清__proto__、prototype

    Hello小伙伴们,我又来啦,今天我们要继续我们JavaScript的入门总结第二弹!!!

    萌兔IT
  • 前端面试宝典(二)

    Hello小伙伴们,上次的题目做的如何呀~是不是觉得对知识点有了更深层次的理解了呢?我们今天还是6道题目哦!

    萌兔IT
  • jQuery选择器总结

    不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都知道,一般学前端,都要用js写tab切换,大图滚动之类的效果,同样的效果,js大概20-4...

    IMWeb前端团队
  • css基础选择器

    要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。

    星辰_大海
  • jQuery选择器总结

    本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都...

    IMWeb前端团队
  • jquery 层级选择器

    关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

    用户1197315
  • 编写灵活、稳定、高质量的CSS代码的规范

    (1)用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。

    WEBING
  • Imooc之Html与CSS

    1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

    ZHaos
  • Python版快速排序算法

    Python版冒泡排序算法请参考:Python版冒泡法排序算法 Python版选择排序算法请参考:Python版选择排序算法 from random impor...

    Python小屋屋主

扫码关注云+社区

领取腾讯云代金券