CSS–基础语法解析

更新时间:2023-04-03 18:46:27 阅读：评论：0

CSS–基础

一、概念二、使用方式1、内嵌式的CSS样式表2、内部CSS样式表3、外部CSS样式表a)、定义.css的样式文件b)、引入外部.css文件三、选择器1、标签选择器 h1 p2、id选择器3、类选择器4、组合选择器5、派生选择器(后代)四、CSS样式属性1、基本属性a)、colorb)、font-sizec)、font-familyd)、text-aligne)、widthf)、heightg)、cursorh)、display2、背景相关a)、 background-colorb)、background-image:url(“”)3、列表相关list-style-type4、布局相关的内容a)、2个与布局相关的标签b)、Box盒子模型五、HTML中布局a)、 table布局（过时）b)、Div+CSS方式（主流）实例：

一、概念

CSS(级联样式表 Cascade Style Sheet)    样式定义如何显示 HTML 元素    样式通常存储在样式表中    HTML标签，不能完成更好的显示效果，需要CSS样式表，进行处理

二、使用方式

1、内嵌式的CSS样式表

<element style=”样式属性1:值1;样式属性2:值2....”/>    存在样式冗余，开发的时候 不建议使用(RGB拾色器扩展)

2、内部CSS样式表

--复用性差<html>  <head>     <style type="text/css"> h1{ coror:#FFF; backgraound-color:#000; } </style>  </head>  <body>     <h1>test</h1>  </body></html>

3、外部CSS样式表

a)、定义.css的样式文件

b)、引入外部.css文件

<html>  <head>     <link rel="stylesheet" type="text/css" href="suns.css"/>  </head>  <body>     <h1>test</h1>  </body></html>

三、选择器

1、标签选择器 h1 p

<html>  <head>     <style type="text/css"> h1{ coror:#FFF; backgraound-color:#000; } </style>  </head>  <body>     <h1>test</h1>  </body></html>

2、id选择器

<html>  <head>     <style type="text/css"> #s{ coror:#FFF; backgraound-color:#000; } </style>  </head>  <body>     <h1 id="s">test</h1>  </body></html>

3、类选择器

<html>  <head>     <style type="text/css"> .c1{ coror:#FFF; backgraound-color以的文言文意思:#000; } </style>  </head>  <body>     <h1 class="c1">test</h1>  </body></html>

4、组合选择器

<html>  <head>     <style type="text/css"> h1,p{ coror:#FFF; backgraound-color:#000; } </style>  </head>  <body>     <h1>test1</h1>西安211大学     <p >test2</h1>  </body></html>

离婚协议书下载5、派生选择器(后代)

<html>  <head>     <style type="text/css"> ol li{ coror:#FFF; backgraound-color:#000; } </style>  </head>  <body>          <ol>       <li> a</li>       <li>b</li>       <li>c</li>    </ol>        </body></html>

四、CSS样式属性

1、基本属性

a)、color

字体前景颜色 color=（“red”,”black”,”#RGB” ）...

b)、font-size

文字大小 font-size='10px'

c)、font-family

字体:tahoma

d)、text-decoration

字体线：underline overline line-through(下、上横穿横线)

d)、te公务员工资套改xt-align

对其方式：left right center

e)、width

标签宽 width="10px"

f)、height

标签高 height="10px"

g)、cursor

鼠标的设置    cursor="pointer"（手）    cursor="wait"   (等待)

h)、display

元素隐藏:    display="none":   隐藏 不占用页面流显示:    display="block":  块级元素的 h1 li table p     display="inline": 行内元素的显示 <input></input>

2、背景相关

a)、 background-color

b)、background-image:url(“”)

--背景颜色、背景图片<html>  <head>     <style type="text/css"> h1{ font-size:100px; font-family:tahoma; text-decoration:line-through; background-color:#000; color:#FFF; width:300px; height:300px; cursor:wait; display:block; } #btn{ background-image:url('btn.png'); width:28px; height:27px; border:0 solid black;(边框) } </style>  </head>  <body>     <h1>suns</h1> xiaohei <input id="btn" type="button" />  </body></html>

3、列表相关

list-style-type

--控制列表的样式    list-style-type:disc（光盘），none(无1、2、3 等)<html>  <head>      <style type="text/css"> ol{ list-style-type:disc; } </style>  </head>  <body>     <ol>          <li>item1</li>          <li>item2</li>          <li>item3</li>          <li>item4</li> </ol>   </body></html>

4、布局相关的内容

a)、2个与布局相关的标签

<div> 块 （块级元素）    整张网页划分成若干部分，每一个部分都是一块内容    <span> 部分 （行内元素）    需要为文本加入样式，js操作    <html>      <head>          <style type="text/css"> div{ background-color:black; color:white; width:100px; height:100px } span{ color:red; } </style>      </head>      <body>          <div>test</div><div>test2</div>          <span>test3</span>      </body></html>

b)、Box盒子模型

1.边框相关的样式 border（默认不显示） 2.内补白（内边距）padding  外补白（外边距）margin

<html>  <head>      <style type="text/css"> div{ width:100px; height:100px; border:solid 1px black;(可单独分开描述) padding:20px 50px; margin:40px auto; } </style>  </head>  <body>      <div>     test1  </div>  <div>   test2  </div>  </body></html>

五、HTML中布局

a)、 table布局（过时）

b)、Div+CSS方式（主流）

特点：布局的内容 摆脱现有的页面流 浮在页面上，打破页面流（块级元素不在同一平面） 后面的div 覆盖前面的div。i.绝对布局 （absolute)    position:absolute    top: 距浏览器上面边距    left:距浏览器坐标的边距    z-index:浮层 （两个div 3 5 谁大谁浮在最上面）   ii.流式布局 （float）主流        float:left 摆脱当前页面流 从左往右浮上来        clear:both 认可前面浮动布局占用页面的位置。（不能算外边距）

--绝对布局<html>  <head>      <style type="text/css"> #s{ border:solid 1px black; width:100px; height:100px; position:absolute; top:50px; left:200px; background-color:green; z-index:4; } #x{ border:solid 1px black; width:300px; height:300px; position:absolute; top:40px; left:150px; background-color:yellow; z-index:3; } </style>  </head>  <body>      <div id="s">     test1  </div>  <div id="x">    test2  </div>   </body></html>

--流式布局<html>  <head>      <style type="text/css"> #s{ border:solid 1px black; width:100px; height:100px; float:left; } #x{ border:solid 1px black; width:100px; height:100px; float:left; margin-left:10px; } #ss{ border:solid 1px black; width:100px; height:100px; background-color:green; clear:both;--(清除页面流带来的影响) } </style>  </head>  <body>      <div id="s">     test1  </div>  <div id="x">    test2  </div>  <div id="ss">     test3  </div>  </body></html>

实例：

<html>  <head>      <style type="text/css"> #container{ margin:0 auto; width:600px; } #header{ height:50px; background-color:rgb(28, 142, 218); padding-top:20px; padding-left:20px; } #content{ height:400px; margin-top:10px; margin-bottom:10px; } #footer{ height:30px; background-color:rgb(68, 196, 19); } #logo{ background-color:rgb(196, 19, 154互联网理财平台); width:50px; } #left{ width:165px; float:left; background-color:rgb(204, 176, 27); margin-right:10px; height:400px; } #right{ width:425px; float:left; background-color:rgb(233, 84, 84); height:400px; } </style>  </head>  <body>      <div id="container" >    <div id="header">   <div id="logo">       header   </div></div><div id="content">   <div id="left">      left   </div>   <div id="right">       right   </div></div><div style="clear:both"></div><div id="footer">   footer    </div>  </div>  </body></html>

}#right{   width:425px;   float:left;   background-color:rgb(233, 84, 84);   height:400px; }  </style>

header

<div id="content">   <div id="left">      left   </div>   <div id="right">       right   </div></div><div style="clear:both"></div><div id="footer">   footer    </div>  </div>

“`

本文地址：https://blog.csdn.net/weixin_44809337/article/details/107501114

本文发布于:2023-04-03 18:46:25，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/d01d874a2adfc8db037ef3147ba5dcc8.html

本文word下载地址：CSS–基础语法解析.doc

本文 PDF 下载地址：CSS–基础语法解析.pdf

上一篇：婚嫁择日速查表，在婚姻嫁娶择日中如何查询夫星与子星

下一篇：返回列表

标签：布局样式选择器样式表

留言与评论（共有 0 条评论）