web建站-CSS基础
时间：2023-07-10 23:30:01 | 来源：网站运营
时间：2023-07-10 23:30:01 来源：网站运营
web建站-CSS基础：文章参考链接
| 属性 | 作用 |
| <b> </b> | 内容加粗 |
| <i> </i> | 斜体文本 |
| <u> </u> | 文本加下划线 |
html属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p> <font face="隶书" size="5px" color="red">欢迎来到css</font> <br/> 借助<b><i>CSS</i></b>,<u>你的网站更精彩</u> </p> </body> </html>传统HTML格式修饰的缺点
- 书写繁琐，结构臃肿，这行效率较低
- 无法做到“一改全改”
- 过多的关注内容的显示和表现形式
引入CSS
- 引入CSS后，在html中只需给相关内容指定选择器，不必书写大量格式代码，代码更简洁，执行效率更高；
- 修改时，只需在CSS文件中改动少量代码，即可实现对所有此文件的网页的更改，即批量更改
- CSS的引用，使网页中内容与形式的“紧耦合”变成“松耦合”，html只需观念朱web的内容，对于内容的表现及呈现形式，交给CSS
CSS(Cascading Style Sheets) ,层叠样式表，用于控制页面样式并允许允许样式信息与内容分离的一种标记性语言
页面构成
- 外观，布局-CSS
- 内容-HTML
- 内容与表示分离是非常重要的web原则
- HTML不包含样式，整个页面通过CSS文件来改变
CSS优势
CSS基本语法
简单的单选题器的语法模板：
selector{ property : value; property : value; ... property : value;}<!--举例-->h1{ font-family:"宋体"; color:red;}多选择器的语法模板
selector1,selector2{ property : value; property : value; ... property : value;}<!--举例-->h1,h2{ color:green;}CSS引入方式
行内引入（尽量避免）
<h1 style="color: blue;"> This heading will be blue now. </h1>内嵌式引用（尽量避免）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> h1 { color: red; } </style></head><body> <h1> This heading will be blue now. </h1></body></html>链接式引用
<!--html代码--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h1> This heading will be blue now. </h1></body></html>/*style.css css代码 ，此代码为css的注释*/h1{ color: green;}三种情况注意：
如果同时使用，运行效果依据：
行内>内嵌>链接
CSS属性
| CSS属性 | 描述 | 值 |
| color | (文本）前景色 | 颜色（颜色名称，RGB，或HEX） |
| background-color | 元素的背景色 | 颜色（颜色名称，RGB，或HEX） |
CSS属性CSS属性–Font
| 属性 | 描述 | 值 |
| font-family | 所用字体 | 字体名称，如“宋体”，“黑体” |
| font-size | 字体大小 | 单元值，百分比，命名值 |
| font-style | 是否倾斜 | normal , italic(斜体） , oblique（倾斜） |
| font-weight | 是否加粗 | normal,bold,bolder,lighter,inherit,100-900 |
| font-variant | 设定小型大写字母 | normal，small-caps,inherit |
| font | 设置所有字体属性 | style，weight，size，family |
/*css文件*/h2{ font-family: 华文宋体;}p{ font-family: Courier; font-size: 14pt;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h2> This heading will be blue now. </h2> <p> this a 字体测试 </p></body></html>CSS属性-text
| 属性 | 描述 | 值 |
| text-align | 行内容对齐 | left，center，right，justify |
| text-decoration | 增加下划线 | underline,overline,line-thrughblink,none |
| text-indent | 首行缩进 | px,pt,%,em |
| text-overflow | 如何处理太长文本 | clip,ellipsis,ellipsis-word |
| text-shadow | 设置文本阴影 | 例：px,px,px,#ff0000 |
| text-shadow | 设置文本阴影 | 例:px,px,px,#ff0000 |
| text-transfom | 修改文本大小写 | capitalize ,uppercase,lowercase |
| line-height | 设置行高 | px,pt,%,em |
| letter-spacing | 设置字符间距 | px,pt,%,em |
| word-spacing | 设置字间距 | px,pt,%,em |
| 属性 | 描述 | 值 |
| text-align | 行内容对齐 | left，center，right，justify |
| text-decoration | 增加下划线 | underline,overline,line-thrughblink,none |
| text-indent | 首行缩进 | px,pt,%,em |
| text-overflow | 如何处理太长文本 | clip,ellipsis,ellipsis-word |
| text-shadow | 设置文本阴影 | 例：px,px,px,#ff0000 |
| text-shadow | 设置文本阴影 | 例:px,px,px,#ff0000 |
| text-transfom | 修改文本大小写 | capitalize ,uppercase,lowercase |
| line-height | 设置行高 | px,pt,%,em |
| letter-spacing | 设置字符间距 | px,pt,%,em |
| word-spacing | 设置字间距 | px,pt,%,em |
css属性–textCSS属性-background
| 属性 | 描述 | 值 |
| background-color | 背景颜色 | 颜色（名称，RGB，HEX） |
| background-image | 背景图片 | url(“图片URL”) |
| background-repead | 是否及如何重复背景图片 | repeat,repeat-x,repeat-y,no-repeat |
| background-attachment | 背景图片是否固定或者页面其余部分滚动 | fixed,scroll |
| background | 简写属性，在一个声明中设置所有背景属性 | #ff0000url(/i/eg_bg_03.gif) no-repeat fixed center |
| 属性 | 描述 | 值 |
| background-color | 背景颜色 | 颜色（名称，RGB，HEX） |
| background-image | 背景图片 | url(“图片URL”) |
| background-repead | 是否及如何重复背景图片 | repeat,repeat-x,repeat-y,no-repeat |
| background-attachment | 背景图片是否固定或者页面其余部分滚动 | fixed,scroll |
| background | 简写属性，在一个声明中设置所有背景属性 | #ff0000url(/i/eg_bg_03.gif) no-repeat fixed center |
/*css文件*/h2{ font-family: 华文宋体;}p{ font-family: Courier; font-size: 14pt;}body{ background-image: url("网站修改.png"); background-repeat: repeat-x; background-position: center;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h2> This heading will be blue now. </h2> <p> this a 字体测试 </p></body></html>/*css文件*/ol{ list-style-type: armenian;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="style.css" type="text/css" rel="stylesheet"/></head><body> <h2> This heading will be blue now. </h2> <p> this a 字体测试 </p> <ol> <li>HTML</li> <li>css</li> <li>php</li> </ol></body></html>注意
样式继承与冲突
多种样式应用到一个元素，这样样式将被继承
更紧的匹配将覆盖一般意义的继承
样式冲突：两种样式发生相同时属性冲突时，后面的样式优先
ID和ID选择器
- 一页上允许给任何元素一个唯一的ID
- 每个ID必须唯一，每个页面仅能用一次
对ID格式进行格式化CSS，使用#ID
/*css文件*/ol{ list-style-type: armenian;}#mission{ font-style: italic;}<p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!</p>链接到页面中的某部分—-锚点
- 一个链接可能包含包括ID，前面要加一个#号
- 浏览器将载入相关页面，并且滚动到包含该ID的元素
<p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers <q>esplode</q> with splendor!</p> <p> Visit<a href="https://www.foryouos.com">foryouos.com</a> to get textPad editor. </p> <a href="#mission">View our Mission statement</a>类与类选择器—-类
- 类可为一组元素设置相同的样式
- 不像ID，类可以被多次使用
<p class="shout">Spatula City! Spatula City!</p> <p class="special">See our spectacular spatula specials!</p> <p class="special">Today only:satisfaction guaranteed.</p>类选择器
.special{ font-weight: bold;}p.shout{ color: red; font-family: Courier;}/*css文件*/| 属性 | 描述 |
| :active | 向被激活的元素增加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素增加样式 |
| :link | 向未被访问的链接增加样式 |
| :visited | 向已被访问的链接增加样式 |
| :focus | 向拥有键盘输入焦点的元素增加样式 |
伪类选择器
/*css*/a:link{color: #FF0000}a:visited{color: #00FF00}a:hover{color: #FF00FF}a:active{color: #0000FF}<!--html--> <p><b><a href="style.css" target="_blank">这是一个链接。</a></b></p> <p><b>注释：</b>在CSS定义中，a:hover必须位于a:link和a:visited之后，这样才能生效</p> <p><b>注释：</b>在CSS定义中，a:active必须位于a:hover之后，这样才能生效</p><div> </div> 分割区 对一个页面实现不同的功能显示
span 仅在一定范围内使用样式的行内元素
页面划分(div)
- 改标签用来指出页面的逻辑区域
- 缺省情况下，它是不显示的，但是可以在其中应用样式
<!--HTMl--><div class="shout"> <h2>Spatula City!</h2> <p class="special">See our spectacular</p> <p>we'll beat any advertised price!</p> </div>/*css文件*/.special{ background-color: yellow; font-weight: bold;}.shout{ color: red; font-family: Courier;}span的使用
仅在一定范围内使用样式的行内元素
<h2>Spatula City!</h2> <p>See our <span class="special"> spectacular</span></p> <p>we'll beat <span class="shout">any advertised price!</span> </p>后代选择器
<!--HTML--><ul class="newslist"> <li>html</li> <li>CSS</li> <li>Javascrip</li></ul>/*css文件*/.newslist { background-color: yellow; font-weight: bold;}/*css文件*/.newslist li { background-color: yellow; font-weight: bold;}子元素选择器
<ul class="newslist"> <li>html</li> <li>CSS</li> <li>Javascrip</li> <ul> <li>apple</li> <li>android</li> </ul> </ul>/*css文件*/li { background-color: cyan; font-weight: normal;}.newslist { background-color: yellow; font-weight: bold;}扩展阅读
CSS样式优先级
选择器优先级
页面布局及盒模型
块元素布局
行内元素布局
整页布局
盒模型
CSS盒模型主要思想是每个元素的布局由四部分组成
- 元素的内容显示区(content area);
- 围绕着元素的边界（border）；
- 内容和边界的距离（padding）;
- 边界和其它内容外边界的距离（margin）
border
<h2>CSS基础知识</h2>/*css文件*/h2 { border: 5px solid red; border-left: thick dotted #cc0088; border-bottom-color: rgb(0,128,128); border-bottom-style: double;}border—-table collapse
<table> <tr><th>学号</th><th>成绩</th></tr> <tr><td>2130505052</td><td>89</td></tr> <tr><td>2130822535</td><td>58</td></tr> </table>/*css文件*/table,td,th { border:2px solid black;} <table> <tr><th>学号</th><th>成绩</th></tr> <tr><td>2130505052</td><td>89</td></tr> <tr><td>2130822535</td><td>58</td></tr> </table>/*css文件*/table,td,th { border:2px solid black; border-collapse: collapse;}box-shadow
<h1>Web编程基础</h1> <p>学习HTML，CSS</p> <p>PHP,哈哈</p>/*css文件*/p { border: 1px dotted black; box-shadow: 10px 10px 5px gray;}h1 { box-shadow: 20px 20px 10px gray inset;}padding
| 属性 | 含义 |
| padding | 4边的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1边的padding |
| 属性 | 含义 |
| padding | 4边的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1边的padding |
| 属性 | 含义 |
| padding | 4边的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1边的padding |
| 属性 | 含义 |
| padding | 4边的padding |
| padding-bottompadding-leftpadding-rightpadding-top | 1边的padding |
padding
h1 { padding:1em 2em 3em 4em ;}注意: 从top开始，沿顺时针方向，即top,right,bottom,left
h1 { padding : 1em 4em ;}注意：从第一项指top和bottom，第二项指right，left
padding示例
<h1>Web编程基础</h1> <h1>第一讲</h1> <h2>第二讲</h2> <h3>第三讲</h3> <h4>第四讲</h4>/*css文件*/h1 { padding: 1em; background-color: yellow; border: 2px solid black;}h2 { padding: 0em; background-color: #BBFFBB;}h3 { padding-left: 200px; padding-top: 30px; background-color: green;}margins
| 属性 | 含义 |
| margin | 4边的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1边的margin |
| 属性 | 含义 |
| margin | 4边的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1边的margin |
| 属性 | 含义 |
| margin | 4边的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1边的margin |
| 属性 | 含义 |
| margin | 4边的margin |
| margin-bootommargin-leftmargin-rightmargin-top | 1边的margin |
marginsh1 { margin:1em 2em 3em 4em ;}注意: 从top开始，沿顺时针方向，即top,right,bottom,left
h1 { margin : 1em 4em ;}注意：从第一项指top和bottom，第二项指right，left
<h1>Web编程基础</h1> <h1>第一讲</h1> <h2>第二讲</h2> <h3>第三讲</h3> <h4>第四讲</h4>/*css文件*/h1 { margin: 1em; background-color: yellow; border: 2px solid black;}h2 { margin: 0em; background-color: #BBFFBB;}h3 { margin-left: 200px; padding-top: 30px; background-color: green;}floating元素
| 属性 | 含义 | 值 |
| width | 设置元素内容显示区的宽度 | 一种尺寸（px,pt,%,em） |
| float | 浮动，即从正常内容流中提升元素 | left,right,none(default) |
width和float注意：width属性仅对块元素和img元素有效
<div> <h1>学习web</h1> <p>第一个块元素</p> <span>第一个行内元素</span> </div>/*css文件*/h1,p,span { border:2px solid black; width: 50%;}p{ text-align: center;}span { background-color: red; color: white;} <div> <p><img src="https://i2.kknews.cc/SIG=k2clg6/ctp-vzntr/1534508967149q7o61qp7op.jpg" alt="koala" class="headericon" />树袋熊</p> </div>/*css文件*/p{ width: 800px;border: 2px solid black;}img.headericon{ float: right; width: 202px; border: 1px dotted black;}浮动元素经常会设置一个width值
如果没有指定width值，其他内容将不能环绕着浮动元素
| 属性 | 含义 | 值 |
| clear | 规定元素的哪一侧不允许其他浮动元素 | left,right,both,none(default) |
| overflow | 属性规定当内容溢出元素框时发生的事情 | visible(default),hidden,scroll ,auto |
| css属性 | 描述 | 值 |
| column-count | 规定元素应该被分隔的列数 | 一个整数 |
| column-gap | 规定列之间的间隔 | 尺寸（px，pt，em，%） |
| column-rule | 设置列之间的竖线宽度，样式和颜色规则 | 2px solid green |
| column-span | 规定元素应横跨多少列 | 1或者all |
| column-width | 规定列的宽度 | 尺寸（px，pt，em，%） |
多列属性
| 属性 | 含义 |
| width，height | 设置元素内容显示区的宽度和高度 |
| max-widthmax-heightmin-widthmin-height | 设置元素的最大，最小高度和宽度 |
| 属性 | 含义 |
| width，height | 设置元素内容显示区的宽度和高度 |
| max-widthmax-heightmin-widthmin-height | 设置元素的最大，最小高度和宽度 |
| 属性 | 含义 |
| width，height | 设置元素内容显示区的宽度和高度 |
| max-widthmax-heightmin-widthmin-height | 设置元素的最大，最小高度和宽度 |
| 属性 | 含义 |
| width，height | 设置元素内容显示区的宽度和高度 |
| max-widthmax-heightmin-widthmin-height | 设置元素的最大，最小高度和宽度 |
width和height注意：以上 属性仅对块元素和img元素有效，如果出现在其它元素中国，将被忽略
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
| 属性 | 描述 | 值 |
| vertical-align | 设置元素的垂直对齐方式 | baseline(默认),与安娜苏放置在父元素的基线上，top,元素的顶部与行中最高元素的顶端对齐middle元素放置在父元素的中部sub垂直对齐文本的下标super，垂直对齐文本的上标text-top元素顶端与父元素字体的低昂段对齐text-bottom元素的订单与父元素字体的低端对齐a size or % |
垂直对齐定位及元素可见性
| 属性 | 含义 | 值 |
| position | 对页面元素进行定位 | static:默认值，没有定位relative:相对于其正常位置的偏移量absolute：绝对定位的元素，相对于static定位以外的第一个父元素进行定位fixed:绝对定位的元素，相对于浏览器窗口进行定位 |
| top,bottom,left，right | 元素边界的偏移量 | 尺寸（px，pt，em，%） |
| 属性 | 含义 | 值 |
| position | 对页面元素进行定位 | static:默认值，没有定位relative:相对于其正常位置的偏移量absolute：绝对定位的元素，相对于static定位以外的第一个父元素进行定位fixed:绝对定位的元素，相对于浏览器窗口进行定位 |
| top,bottom,left，right | 元素边界的偏移量 | 尺寸（px，pt，em，%） |
| 属性 | 含义 | 值 |
| position | 对页面元素进行定位 | static:默认值，没有定位relative:相对于其正常位置的偏移量absolute：绝对定位的元素，相对于static定位以外的第一个父元素进行定位fixed:绝对定位的元素，相对于浏览器窗口进行定位 |
| top,bottom,left，right | 元素边界的偏移量 | 尺寸（px，pt，em，%） |
| 属性 | 含义 | 值 |
| position | 对页面元素进行定位 | static:默认值，没有定位relative:相对于其正常位置的偏移量absolute：绝对定位的元素，相对于static定位以外的第一个父元素进行定位fixed:绝对定位的元素，相对于浏览器窗口进行定位 |
| top,bottom,left，right | 元素边界的偏移量 | 尺寸（px，pt，em，%） |
定位
| 属性 | 含义 | 值 |
| z-index | 设置元素的3维折叠顺序 | auto:堆叠顺序与父元素相等an interger:设置元素的堆叠顺序 |
| 属性 | 含义 | 值 |
| z-index | 设置元素的3维折叠顺序 | auto:堆叠顺序与父元素相等an interger:设置元素的堆叠顺序 |
<h1>这是一个标签</h1> <img class="x" src="psc.png"/> <p>默认的z-index是0.z-index -1拥有最低的优先级1拥有最高的等级</p>/*css文件*/img.x { position: absolute;left: 0px; top: 0px;z-index: -1;}| 属性 | 含义 | 值 |
| display | 设置元素应该生成的框的类型 | block:元素将显示为块元素，元素前后带有换行符 |
| visibility | 设置元素能否可见 | visible:默认值，元素是可见的hidden：元素是不可见的 |
| opacity | 设置 元素的透明度 | 从0.0(完全透明)到1.0(完全不透明） |
| 属性 | 含义 | 值 |
| display | 设置元素应该生成的框的类型 | block:元素将显示为块元素，元素前后带有换行符 |
| visibility | 设置元素能否可见 | visible:默认值，元素是可见的hidden：元素是不可见的 |
| opacity | 设置 元素的透明度 | 从0.0(完全透明)到1.0(完全不透明） |
元素可见性
<h2>这是一个标题</h2> <h2>这是另一个标题</h2>/*css文件*/h2 { background-color: yellow; border: 1px solid black; display: inline;}将列表显示为行内元素
<ul id="menubar"> <li>新闻</li> <li>友情链接</li> <li>会员</li> <li>注册</li> </ul>/*css文件*/li{ padding: 0.5em; border: 2px solid gray; display: inline;}visibility属性
display和visibility的主要区别
-display：none ;元素不会占用页面上的空间
-visibility:hidden;虽然它的内容用户看不到，但元素仍然占用页面空间
在线咨询
