糖尿病康复 > css语法详细内容（超详细）

css语法详细内容（超详细）

时间：2019-10-02 18:27:49

相关推荐

css语法详细内容（超详细）

css概述及基本语法说明

css是级联样式表，CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

也就是把html网页内的内容超文本语言和样式表关联起来加以修饰

CSS与HTML的关系

HTML是网页内容

CSS定义页面的样式

<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

style标签是css里最重要的标签通过style标签可以直接修饰各类属性

1.内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

<html><head><meta charset="utf-8"><title></title><style type="text/css">.p1{color: aquamarine; font-size: 40px; }.p2{color: brown; font-size: 20px;}.p1,.p2,{font-family: 隶书;}#title{color: crimson; font-size: 30px;}*{color: blueviolet;}</style></head><body><p id="title" >毛主席</p><p class="p1">万里长征</p><p class="p2">万里长征</p><p class="p1">万里长征</p><p class="p2">万里长征</p><h6 >拉啊啦啦</h6><p>啥实打实的他</p></body></html>

2.外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中.

<html><head><meta charset="utf-8" /><title></title><link href="css/999.css" rel="stylesheet"/></head><body><p>床前明月光，</p><p>疑是地上霜。</p><p>举头望明月，</p><p>低头思故乡。</p></body></html>

选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器

常用的选择器：

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

类选择器：通过标签的class属性值选中一组标签

语法：.class属性值{}

id 选择器：通过标签的id属性值选中唯一的一个标签

语法： #id属性值 {}

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器1,选择器2,选择器N{}

通配选择器:可以用来选中页面中的所有的标签

语法：*{}

选择器的优先级:

最低到高:

通配选择器<标签选择器<类选择器<id选择器

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.p1{color: #DC143C;font-size: 50px;text-align: ;text-decoration: line-through;text-decoration: none;line-height: 60px;text-indent: 2em;letter-spacing: 100px;text-decoration: underline;font-style: italic;}a{text-decoration: none; font-size: 100px;}.p2{word-spacing:1.25rem;}</style></head><body><p class="p1">阿三打撒大厦就是看到噶快技术规范哈撒给阿松大沙发沙发打发的撒发生大反击发士大夫撒法和规范哈的发布会上地方阿萨打算发到付就会打飞机啊不放假啊刘江龙各种姿势打飞机</p><a href="" >百度</a><p class="p2">hello word diss you</p></body></html>

常用的选择器：

后代选择器：选中指定标签的指定后代标签

语法：祖先标签后代标签{}

子标签选择器：选中指定父标签的指定子标签

语法：父标签 > 子标签

选中指定标签的相邻标签

语法：选择相邻选择器：器 + 相邻{}

兄弟选择器：选中指定标签的兄弟标签

语法：选择器 ~ 兄弟{}

标签之间的关系

父标签：直接包含子标签的标签

子标签：直接被父标签包含的标签

祖先标签：直接或间接包含后代标签的标签，父标签也是祖先标签

后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签

兄弟标签：拥有相同父标签的标签叫做兄弟标签

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.p1+p{color: #DC143C;}</style></head><body><p1 class="p1"><b><i>十大大苏打</i></b></p1><p ><b><i>阿萨大大</i></b></p><p ><b><i>打算发到付</i></b></p></body></html>

color：字体颜色

font-size：字体大小

font-family：字体

text-align：文本对齐

text-decoration:line-through：定义穿过文本下的一条线

text-decoration:underline：定义文本下的一条线

text-decoration:none：定义标准的文本

font-style: italic;斜体文本

font-weight:字体粗细

line-height:设置行高

letter-spacing可以指定字符间距

text-indent用来设置首行缩进 em表示单位

background-color背景颜色

background-image背景图片

background-repeat背景重复 norepeat表示不重复图片

background-size背景尺寸

background- position 背景位置

css列表属性

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

list-style-image 将图象设置为列表项标志。

list-style-position 设置列表中列表项标志的位置。

list-style-type 设置列表项标志的类型。

list-style 简写属性。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/*.u1>li{ list-style-type: circle;text-align: center;list-style-position: inside;list-style-image: url(img/edit.jpg);}*/.u1{text-align: center; list-style-type: circle;list-style:url(img/Male.gif) none inside; }</style></head><body><ul class="u1"><li>裂开</li><li>裂开</li><li>裂开</li><li>裂开</li></ul><ul><li>裂开</li><li>裂开</li><li>裂开</li><li>裂开</li></ul></body></html>

css伪类

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类。

伪类的语法：

:link表示普通的链接（没访问过的链接）

:visited表示访问过的链接

浏览器是通过历史记录来判断一个链接是否访问过

使用visited伪类只能设置字体的颜色

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

注意：:visited放在:hover之前

:active 必须被置于 :hover 之后，才是有效的

:hover和:active也可以为其他标签设置

:focus向拥有键盘输入焦点的标签添加样式。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">a:link{color: gold; }a:visited{color: aquamarine;}a:hover{color: #DC143C;}a:active{color: #8A2BE2;}.i1:hover{color: #DC143C; background-color: #7FFFD4; }.i2:focus{color: #DC143C; background-color: aquamarine;}</style></head><body><a href="">百度</a><a href="">腾讯</a><input type="button" value="按钮" class="i1" /><br /><input type="text" class="i2" /></body></html>

透明

定义透明效果的属性是 opacity。

opacity 属性设置标签的不透明级别值为1。

规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

块级标签，行级标签，行级块标签

块级标签：无论内容多少都会独自占据一行的。

例如

、

、、、等。

行级标签：只占自身大小的标签，不会占一行。

例如、、、等。

例如等

display

通过display样式可以修改标签的类型。

可选值：

block ：设置标签为块标签

inline ：设置标签为行级标签

inline-block ：设置标签为行级块标签

none ：隐藏标签（标签将在页面中完全消失）

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><p style="display: inline; width: 200px;">qqqqq</p>aaaaaaaaaaaa<hr/><b style="display: inline-block; width: 200px;">bbbbbb</b>cccccc<hr/><p style="display: none;">qqqqq</p>aaaaaaaaaaaa</body></html>

div 和span

div标签

div是块级标签，可以放置任何标签。

div没有任何附加功能，给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

span标签

span是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span标签被用来选中文档中的文字。

盒子模型

一个盒子我们会分成几个部分：

–内容区(content)

–内边距(padding)

–边框(border)

–外边距(margin)

内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标签都是存在于内容区中的。

如果没有为标签设置内边距和边框，则内容区大小默认和盒子大小是一致的。

通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。

width和height属性只适用于块标签(包含行级块)。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.d1{color: #DC143C;background-color: #FFD700;width: 300px;height: 300px;/* 此处设置的width和height只是为内容区的宽高 *//*padding-left: 10px;padding-top: 20px;padding-bottom: 20px;padding-right: 10px;} *//* padding: 10px 20px 30px 10px; 依次为上右下左顺时针方向*//* padding: 10px 20px; 依次为上下左右*//* padding: 10px; 这种的就是上下左右全都设置*/</style></head><body><div class="d1" >我裂开</div></body></html>

border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框边框可以设置样式：

dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线）

border:1px red solid;

上边的样式分别指定了边框的宽度、颜色和样

外边距是标签边框与周围标签相距的空间。使用margin属性可以设置外边距。用法和padding类似，同样也提供了四个方向的。

margin-top/right/bottom/left。

margin的值可以为负值。

margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.

垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

margin: 0;

padding: 0;

}

浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。

浮动使用float属性。

可选值：

none ：不浮动

left ：向左浮动

right ：向右浮动

块级标签和行级标签都可以浮动，当一个行级标签浮动以后将会自动变为一个块级标签。当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.d0{float: left; width: 150px; height: 50px; background-color: #FFD700; color: #DC143C;line-height: 50px; margin: 0 auto;}a{text-decoration: none; }a:hover{color: blueviolet; }#title{width: 750px; margin: 0 auto; }.d1{float: left; width: 250px; height: 600px; background-color: blueviolet; color: aliceblue;line-height: 600px; margin: 0 auto;}#pp{width: 750px; margin: 0 auto;}.i1{height: 100px; background-color: #000000; color: #DC143C; line-height: 100px;text-align: center;}</style></head><body><div id="title"><div class="d0"> <a href="">首页</a></div><div class="d0"><a href="">产品介绍</a></div><div class="d0"><a href="">项目介绍</a></div><div class="d0"><a href="">资源管理</a></div><div class="d0"><a href="">人力介绍</a></div><div style="clear: left;"></div></div><div id="pp"><div class="d1">一些极其奇怪得东西</div><div class="d1">真的很奇怪的东西</div><div class="d1">没有比这些玩意更奇怪的东西了</div><div style="clear: left;"></div><div class="i1">奇怪的导航网页</div></div></body></html>

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。

可选值：

left ：忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动

如果觉得《css语法详细内容（超详细）》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。