微网站模板开发,做网站反复修改,网站空间20g,php做网站标题加链接CSS#xff0c;层叠样式表#xff08;Cascading Style Sheets#xff09;#xff0c;能够对网页中元素位置的排版进行像素级精确控制#xff0c;支持几乎所有的字体字号样式#xff0c;拥有网页对象和模型样式编辑的能力#xff0c;简单来说#xff0c;美化页面。
CSS…CSS层叠样式表Cascading Style Sheets能够对网页中元素位置的排版进行像素级精确控制支持几乎所有的字体字号样式拥有网页对象和模型样式编辑的能力简单来说美化页面。
CSS引入方式
方式一行内式
行内式通过元素开始标签的style属性引入样式语法为 样式名:样式值; 样式名:样式值; ……
缺点 代码复用度低不利于维护css样式代码和html结构代码交织在一起影响阅读影响文件大小影响性能 例
!DOCTYPE html
headmeta charsetUTF-8titlecss引入方式行内式/title
/head
bodyinput typebutton value按钮stylewidth: 60px;height: 40px;background-color: yellowgreen;color: antiquewhite;font-size: 20px;font-family: 隶书;border: 2px solid green;border-radius: 5px;
/body
/html效果如图 方式二内嵌式
通过在head标签中的style标签定义本页面的公共样式
通过选择器来确定样式的作用元素
!DOCTYPE html
headmeta charsetUTF-8titlecss引入方式内嵌式/titlestyleinput{width: 60px;height: 40px;background-color: yellowgreen;color: antiquewhite;font-size: 20px;font-family: 隶书;border: 2px solid green;border-radius: 5px;}/style
/head
bodyinput typebutton value按钮input typebutton value按钮input typebutton value按钮
/body
/html在头标签中定义style标签中的input的样式后所有的input标签的css样式都会有其样式。
方式三外部样式表
将css代码单独放入一个.css文件中哪个html文件需要这些代码就在head中通过link标签引入
link标签link/
属性 href指明css文件的路径。 rel指明引入的文件类型如果引入css文件文件类型为stylesheet 例如
css文件
input{width: 60px;height: 40px;background-color: yellowgreen;color: antiquewhite;font-size: 20px;font-family: 隶书;border: 2px solid green;border-radius: 5px;
}html文件
!DOCTYPE html
headmeta charsetUTF-8titlecss引入方式内嵌式/titlelink hrefcss/btn.css relstylesheet
/head
bodyinput typebutton value按钮input typebutton value按钮input typebutton value按钮
/body
/htmlcss选择器
元素选择器
语法格式标签名{ }
在{ }中的css样式会作用到所有标签名对应的标签上
缺点若某些同名标签的元素不希望使用某些样式不能与其他同名标签的元素区分
例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title元素选择器/titlestyleinput{width: 80px;height: 40px;background-color: color-mix(in srgb, color percentage, color percentage);color: darkblue;border: 3px solid gold;font-size: 22px;font-family: 隶书;line-height: 30px;border-radius: 5px;}/style
/head
bodyinput typebutton value按钮/input typebutton value按钮/input typebutton value按钮/
/body
/htmlid选择器
id选择器根据标签的id值确定样式的作用元素
一般每个元素都有id值但是在一个页面中id的值不应该相同应该具有唯一性
语法格式#id值{ }
缺点因为id值有唯一性通过id选择器指定的样式只能作用到一个元素上。
例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title元素选择器/titlestylebtn3{width: 80px;height: 40px;background-color: color-mix(in srgb, color percentage, color percentage);color: darkblue;border: 3px solid gold;font-size: 22px;font-family: 隶书;line-height: 30px;border-radius: 5px;}/style
/head
bodyinput idbtn1 typebutton value按钮/input idbtn2 typebutton value按钮/input idbtn3 typebutton value按钮/
/body
/html如此在style中定义的样式只会作用于id值为btn3的元素上
class选择器
class选择器根据元素的class属性值确定样式的作用元素
元素的class属性值可以重复而且一个元素的class属性可以有多个值多个属性之间用空格分开
语法.class属性值{ }
例如
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title元素选择器/titlestyle.shapeClass{width: 80px;height: 40px;border-radius: 5px;}.colorClass{background-color: color-mix(in srgb, color percentage, color percentage);color: darkblue;border: 3px solid gold;}.fontClass{font-size: 22px;font-family: 隶书;line-height: 30px;}/style
/head
bodyinput typebutton value按钮 classshapeClass colorClass fontClass/input typebutton value按钮 classshapeClass fontClass/input typebutton value按钮 classcolorClass fontClass/input typebutton value按钮 classcolorClass/input typebutton value按钮/
/body
/htmlclass属性会根据其class属性值引入样式效果如图 CSS浮动
css的浮动使得元素脱离文档流按照指定的方向左或右发生移动直到它的边缘碰到包含框或另一个浮动框的边框为止。
浮动后一定不会将文字挡住文字会被挤到别的方向就像水一样。
文档流是文档中可显示对象在排列时所占用的位置脱离文档流就是在页面中不占位置了。
一个元素脱离文档流后它在文档流中的下一个元素就会占用它的位置。
例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titlecss浮动/titlestyle.outerDiv{width: 500px;height: 300px;border: 1px solid green;background-color: beige;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;}.d1{background-color: aqua;float: right;}.d2{background-color: rgb(255, 0, 0);}.d3{background-color: rgb(255, 255, 0);}/style
/head
bodydiv classouterDivdiv classinnerDiv d1diva/divdiv classinnerDiv d2divb/divdiv classinnerDiv d3divc/div/div
/body
/html效果如图 注浮动后的元素不会覆盖其他元素。
CSS定位
css定位要用到的样式有position、left、right、top、bottom
potion样式有 static默认 absolute绝对 relative相对 fixed相对 绝对定位代表定位只根据页面来定位
relative相对定位会相对其原本的位置来定位
fixed相对定位会相对浏览器窗口来定位即如果页面较长可以向下拖拽但是不论如何拖拽都会显示在窗口的同一个位置一些广告就是如此。
一般left和right之中只用其中一个top和bottom之中只用其中一个。
CSS盒子模型
对于一个块元素width和height表示横向和纵向的容量border是在容量的边缘外再加上指定像素的空间的厚度的空间就像给此块元素套了层细胞壁。而内边距和外边距是根据border的内外指定一定的区域留空内边距的大小不会影响容量而是将border项外扩张就像扩大细胞壁和细胞膜的间距。 内边距padding 外边距margin 比如将diva的右外边距设置为10px
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title盒子模型/titlestyle.outerDiv{width: 500px;height: 300px;border: 1px solid green;background-color: beige;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;float: left;}.d1{background-color: aqua;margin-right: 10px;}.d2{background-color: rgb(255, 0, 0);}.d3{background-color: rgb(255, 255, 0);}/style
/head
bodydiv classouterDivdiv classinnerDiv d1diva/divdiv classinnerDiv d2divb/divdiv classinnerDiv d3divc/div/div
/body
/html效果如图 以margin为例margin: 10px; 表示上下左右都是10px的外边距。margin: 10px 20px; 表示上下外边距是10px左右外边距是20px。margin: 10px 20px 30px 40px表示上外边距是10px右外边距是20px下外边距是30px左外边距是40px即按顺时针上右下左的顺序。当然也可以使用margin-rightmargin-top等方法分别指定大小。
padding也是同理。
margin-auto和padding-auto即自动居中。
