JAVA EE(进阶)_CSS

人与人之间总是渐渐疏离——陳長生.❀主页陳長生.-CSDN博客❀上一篇JAVA EE(进阶)_HTML-CSDN博客1.CSS1.1.介绍如果说HTML是前端的骨架那么CSS就是前端的外表可以做到美化网页的效果1.2.语法stylep{}/stylestyle用于定义元素的外观与格式p被改变的元素style一般在head中设置2.CSS选择器2.1.标签选择器css中自带的标签将它原本的样式改变html langen head titleCSS/title style p{ color: aqua; } /style /head body p我是自带的p标签/p /body /html将p标签中添加一个颜色为青色的数值结果2.2.class选择器自定义变量用于标签中的class类创建时变量前面要有个“.”!DOCTYPE html html langen head titleCSS/title style .ccs{ color: aqua; } /style /head body p classccs我是自定义的class变量/p /body /html将p标签中类中给一个自定义变量该变量为一个颜色为青色的数值结果:2.3.id选择器自定义变量用于标签中的id属性创建时变量前面要有个“#”!DOCTYPE html html langen head titleCSS/title style #ccs{ color: aquamarine; } /style /head body p idccs我是自定义的id变量/p /body /html将p标签中类中给一个自定义变量该变量为一个颜色为青色的数值结果2.4.复合选择器适用于表格标签用于找寻列级别标签并设置样式!DOCTYPE html html langen head titleCSS/title style ul li{ color: aquamarine; } ul li a{ color: rgb(255, 0, 0); } /style /head body ul li第一行第一列/li li第一行第二列/li /ul ul li第二行第一列/li li a href#第二行第二列/a /li li第二行第三列/li /ul /body /html将ul行li列的元素都赋为青色将ul行li列a链接的元素赋为红色2.5.通配符选择器上述列举的都是给单个属性才能使用的例如class选择器只能在class中使用id选择器只能在id中使用而通配符可以给全局使用!DOCTYPE html html langen head titleCSS/title style *{ color: aqua; } /style /head body p1/p p2/p p3/p /body /html将全局的颜色都赋为青色3.CSS样式3.1.color设置字体颜色!DOCTYPE html html langen head titleCSS/title style .color{ color: aqua; } /style /head body p classcolor颜色/p /body /html将颜色设置为青色结果3.2.font-size设置字体大小!DOCTYPE html html langen head titleCSS/title style .font{ font-size: 100px; } /style /head body p classfont字体/p /body /html将字体设置为100像素大小结果3.3.border设置边框!DOCTYPE html html langen head titleCSS/title style .border{ border-width: 10px; border-style: solid; border-color:aquamarine } /style /head body p classborder边框/p /body /htmlborder-width边框粗细border-style边框样式border-color边框颜色结果也可以单独为边框的一遍设置粗细!DOCTYPE html html langen head titleCSS/title style .border{ border-top: 10px; border-bottom: 20px; border-left: 30px; border-right: 40px; border-style: solid; border-color: aquamarine; } /style /head body p classborder边框/p /body /html结果3.4.width/height设置宽和高只适用于块级引用“div” “h1-h6” “p”不适用于行级引用“a” span!DOCTYPE html html langen head titleCSS/title style .ccs{ height: 100px; width: 100px; } /style /head body p classccs1/p /body /html结果按F12并移动到对应语句即可出现如图中效果3.5.margin设置外边距!DOCTYPE html html langen head titleCSS/title style .ccs{ margin: 10px; } /style /head body p classccs外边距/p /body /html设置外边距为10像素同理外边距也可以像边框一样单个给上下左右设置像素大小结果F123.6.padding设置内边距!DOCTYPE html html langen head titleCSS/title style .ccs{ padding: 10px; } /style /head body p classccs内边距/p /body /html设置外边距为10像素同理外边距也可以像边框一样单个给上下左右设置像素大小结果