CSS样式表
程序员文章站
2022-05-07 09:13:22
...
1 使用css样式的方式
html <!DOCTYPE>声明
html4
html5 <!DOCTYPE>
| 内联样式表 <body style="background-color: seagreen;margin: 0;padding: 0;"> 嵌入式样式表<style type="text/css"></style> 需要将样式放在<head></head>之中 引入样式表 <link rel="stylesheet" type="text/css" href="style.css"> |
定义样式表
| HTML标记选择器 <p></p> p{属性:属性值;属性1:属性值1} p可以叫做选择器，定义那个标记中的内容执行其中的样式 一个选择器可以控制若干个样式属性，他们之间需要用分号隔开 class定义 <p class=“p”>…</p> class定义是以.开始 .p { 属性：属性值} ID选择器 <p id=“p”>….</p> ID定义是#开始的 #p{属性:属性值} 优先级 ID > Class >HTML 同级时选择离元素最近的一个 |
CSS常见属性
| 1 颜色属性 color属性定义文本的颜色 color:green color:#ff6600 color:#f60 2字体属性 1 font-size 字体大小 px:设置一个固定的值 %:父元素的百分比 larger:比父元素大 smaller:比父元素小 inherit:继承父元素的 2 font-family 字义字体 font-family:微软雅黑、serif 可以使用逗号隔开，以确保当字体不存在的时候直接使用下一个 font-weight 字体加粗 font-style 字体样式 font-variant 小型大写字母显示文本 3 背景属性 背景颜色 background-color 背景图片background-image 背景重复 background-repeat repeat repeat-x repeat-y no-repeat 背景位置background-position 横向left centre right 纵向top centre bottom 4 文本属性 text-align 横向排列 left center right line-height 文本行高 a)%基于字体大小的百分比行高 b)数值来设置固定值 text-indent 首行缩进 letter-spacing 字符间距离 1)normal 默认 2)length设置具体的数值 3 inherit 继承 direction 文本方向 ltr rtl inherit text-transform 文本大小写 5 边框属性 1)边框风格 border-style 2)边框宽度 border-width 3)边框颜色 border-color |
| div css 布局 1 div和span div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式 div和span的区别在于，span是内联元素，div是块级元素 2 盒模型 盒子外边距:margin 鸽子内边距:padding 盒子边框宽度：border 盒子宽度：width 盒子高度：height 3 布局相关属性 1)position定位方式 relative 正常定位 absolute 根据父元素进行定位 fixed 根据浏览器窗口进行定位 static 没有定位 inherit 继承 2) 定位 left right top botton 3)z-index 层覆盖先后顺序(优先级) 4)display 显示属性 none层不显示 block 块状显示，在元素后面换行，显示下一个块元素 inline 内联显示，多个块可以显示在一行内 块元素可以显示宽度，内联元素不可以显示宽度 5)float 浮动属性 6)clear清除浮动 7) overflow溢出处理 |
上一篇： SharedPreferences+File操作详解
下一篇： SQL中的CASE WHEN用法