CSS基础语法和CSS经常用到的知识点总结

CSS基础语法和CSS经常用到的知识点总结,第1张

概述CSS基础语法和CSS经常用到知识点总结

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家,也给大家做个参考。

CSS基础语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开.例如:下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素.在这个例子中,h1 是选择器,color 和 Font-size 是属性,red 和 14px 是值.h1 {color:red; Font-size:14px;}//看见后面有分号,如果是一个属性或者这个属性在尾部可以不加分号,除了这两种情况必须加 不然页面是很错乱的=======================页面居中问题可以先设置body{margin:0 auto;}有的浏览器即使设置这个也不会居中的那么就要加上这句DTD申明代码<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd">===================body和div背景设置问题①、background-color//背景颜色属性②、background-image:url('背景图片路径');//背景图片属性body { background-color:blue;} p{ background-image:url('背景图片路径');} ③、如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性.背景定位可以利用 background-position 属性改变图像在背景中的位置.下面的例子在 body 元素中将一个背景图像居中放置垂直平铺:body{   background-image: url(http://www.iiwnet.com/logo.gif);  background-repeat: repeat-y;//垂直方向平铺repeat-x水平方向的repeat两个方向都平铺 no-repeat都不平铺   background-position:center;//居中}body是标签名,background-color,background-image,background-repeat是属性,blue是属性值等当然这些属性可以用一句话综合写起来 看下面属性综合写法=================多个标签组合h1,h2,h3 {color:red;}//是逗号分开的 一般用在有的标签样式一样就可以写在一起这样就减少代码的使用,能重复调用把标题<h1><h2><h3>的字体颜色都变为红色=================属性综合写法div {Font:italic normal bold 11pt arial;}// 这是字体相关属性的综合写法div的字体风格(Font-style)属性值是italic,字体变量(Font-variant)属性值是normal,字体浓淡(Font-weight)属性值是bold,字体大小(Font-size)属性值是11pt,字体名称(Font-family)属性值是Arialp{border:1px solID #dddddd}//这是边距属性综合写法 大小 样式(solID为实线 dashed为虚线 dotted为点线...还有自己总结)你看到没我这一句CSS代码结尾没分号;是可以的上面已经讲过了================标签嵌套div h1 {color:blue;}div里面的<h1>字体颜色为蓝色.div是 h1的父亲 h1是div的儿子 我在写CSS样式都是用这样的为什么呢?原因是你想想就知道了 世界有很多人难道都是你父亲吗 你用标签嵌套,即使这个父亲的儿子名字一样但是这个儿子还是这个父亲的不会是另个人的,所以当你嵌套了就不怕 在其他地方重复用这个标签名或类名(ID选择器是唯一的不能重复)===============定义ID#main {background:#ff0000;wIDth:100%;}<div ID="main">hello</div>//那么直接调用#mian这里是用#+ID名是方式,也可以用标签名加+#+ID名,如div#main,一般不这么用.================定义class.red {color:red;}<div  >hello</div>同ID的写法差不多,把"#"改为".",如果一个标签同时定义了ID跟class,ID具有优先级.*表示该标签下的所有元素样式body * {padding:0px;}用得比较少================好了没时间就总结这么多 最好要记住样式优先级(1) 标签中的style > ID > class  (2) 标签中的style > 页面中的style > 导入的样式@import (3) 用link,如<link rel='stylesheet' type='text/CSS' href='' />,更写在页面上同等级的.  如果同样的样式定义了2次,后面出现的具有优先级.

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的CSS基础语法和CSS经常用到的知识点总结全部内容,希望文章能够帮你解决CSS基础语法和CSS经常用到的知识点总结所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1096222.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存