简单了解并使用CSS
CSS(Cascading Style Sheets)层叠样式表
作用:用于美化页面且修饰字体大小没限制
css样式代码在<style></style>标签中书写,<style></style>标签放置在<head>标签中
格式规范:
选择器名称{ 属性名:属性值;属性名:属性值;..............}
选择器:指定css样式作用在哪些html标签之上
如果属性值有多个则用空格隔开
CSS注释:/* CSS注释内容 */
CSS选择器:元素选择器、类选择器、id选择器
元素选择器:(元素==标签) 选择CSS样式代码作用于对应标签名的标签上
类选择器:class属性
格式:
.类名{.........} 源代码: <span class="类名">xxxx</span>
id选择器:id的属性值必须在本页面是唯一的 特点:更集聚针对性
格式:
#id值{....} 源代码: <span id="id值">xxxx</span>
基本选择器的结合方式: 层级关系
格式:
选择器1 选择器2 .....{............} 寓意:选择器1下的选择器2
边框属性: 所有的html标签都有边框,默认边框不可见
设置边框的格式:宽度 样式 颜色
线条样式:solid 实线、 none 无边、 double 双线
背景颜色设置的两种方式:1.英文单词 2.颜色代码 格式:#红绿蓝 每一个颜色用两个16进制位数表示
例如:#ff1100 红色:ff;绿色:11;蓝色:00 (用于微调颜色)
float浮动属性:
格式: 选择器{float: 属性值}
常用属性值:none 元素不浮动 (默认)、left 元素向左浮动、 right 元素向右浮动
display属性: 使元素在行内元素和块元素之间相互转换
格式:选择器{dispaly: 属性值}
常用属性值:block:块元素、inline:行内元素、none:此元素将被隐藏,不显示也不占用页面空间
字体样式: font-size 设置字体的大小、 color 设置字体的颜色
CSS盒子模型:
设置css边框大小:border-top : xx; border-bottom : xx; border-left : xx; border-right : xx
内边距padding:css边框里面内容体的距离
格式:padding-top : xx; padding-bottom : xx; padding-left : xx; padding-right : xx
外边距margin:css边框与边框的距离
格式:margin-top : xx; margin-bottom : xx; margin-left : xx; margin-right : xx
css样式和html的结合方式:
内部样式:
(适合针对性)行内样式:通过style属性来设置元素的样式
例:
<a style="xxxx:xxxx;">xxxxxxxxxx</a>
(适合在页面中进行复用)标签方式
例:
<style>xxxxxxxxxxxxxx</style>
外部样式: