欢迎光临
我的个人博客网站

WEB开发-CSS入门学习总结

HTML学习完成以后,我们就要开始学习CSS的相关知识,CSS是用来修饰网页内容的一种语言。

层叠样式表(Cascading Style Sheets,缩写:CSS),是一种样式表语言,描述如何显示HTML元素。

引入方式

1.内联/行内

<p style='color:red;'>使用style属性</p>

2.内部样式

在head标签里面添加style标签里写样式

<head>     <title>嵌入式</title>     <style type='text/css'>         p{             font-size: 18px;              color: red;         }     </style> </head>

3.外部样式表

创建一个扩展名.css的文件,在这个文件中写样式,在head里面引入样式文件。

<head>   <title>外部样式表</title>   <link rel="stylesheet" type="text/css" href="style.css" />  </head>

CSS语法

规则是由选择器和多条声明(属性:值)语句组成

p { color: red; font-size: 16px; }

Id和Class选择器

id 选择器是为有特定 id 的元素指定样式。

class 选择器是用于一组元素的样式。

#idName {    color:red; } .className {    color:red; }

样式常用属性

背景:background-color(image,repeat,position,attachment)

字体:font,font-size(family,style,weight)

文本:color,line-height,text-align(shadow,indent),vertical-align,white-space,world-sapcing

列表:list-style,list-style-type,list-style-image,list-style-position

链接:a:link,a:hover,a:active,a:visited

边框:border,border-style(width,corlor,bottom,left,right,top)

外边距:margin,margin-top(right,bottom,left)

内边距:padding,padding-top(right,bottom,left)

显示:display:inline/block/inline-block

定位:position:static/relative/fixed/absolute/sticky

浮动:float:left/right/none     clear:left/right/none/both

属性选择器

[title] { color:red; } /* 相等的值 */ [title=test] { border: 2px solid blue; } /* 包含指定的值 */ [title~=hello] { color:blue; } /* 开头为指定的值 */ [lang|=en] { color:blue; } /* 结尾为指定的值 */ [lang&=test] { color:blue; }

CSS组合嵌套

/* 组合,多个名称逗号(,)分隔 */ .test1, .test2 { color: red; } /* 嵌套,多个名称空格分隔*/ .test p { color: blue; }

CSS注释

/* * 这是body的样式 */ body{     width: 100%;  /* 设置宽100% */     height: 100%;     margin: 0px;     padding: 0px; }

CSS伪类

伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,如:

a:link,a:hover,a:active,a:visited,:first-child,:first-of-type,:checked,:disabled,:focus

CSS伪元素

伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层

::after,::before,:first-line,:first-letter

CSS优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

一般我们使用这个方法计算权重:

内联样式权值=1000,ID选择器权值=100,类选择器权值=10,标签选择器权值=1

根据样式的规则把权值做加法,值越大优先级越高。

 

文章内容如果写的存在问题欢迎留言指出,让我们共同交流,共同探讨,共同进步~~~

文章如果对你有帮助,动动你的小手点个赞,鼓励一下,给我前行的动力。

赞(0) 打赏
未经允许不得转载:张拓的天空 » WEB开发-CSS入门学习总结
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏