css样式基础
-语法规范：
<head>
<style>p {color: red;}</style>
</head>
一、样式表的位置
1、行内样式表（行内式）
适合于修改简单样式
2、内部样式表（嵌入式）
一般将style标签放在head标签内
3、外部样式表（链接式）
推荐使用，可控制多个页面
二、字体样式与文本样式
1、字体样式
（1）字体系列
body {font-family:"Microsoft Yahei";}
当代码中有多个字体时，系统依次查找是否有该字体。
（2）字体大小
body {font-size:16px;}
（3）字体粗细
<head>
<style>
.bold{
font-weight:bold;}
<!--或者写font-weight:700;-->
</style></head>
<body>
<p class="bold">内容</p>
</body>
（4）字体样式
em {font-style:normal;}<!--可以让斜体复原-->
<!--italic为斜体样式-->
- 复合属性写法
<!--font:font-style font-weight font-size/line-height font-family;顺序不可更改！！-->
<!--size和family必须保留-->
div {font:font: italic 700 16px 'Microsoft yahei';}
2、文本样式
注：
（1）color
主要使用预定义的颜色值、十六进制和RGB代码。
（2）text-align
div {text-align:center;}<!--左对齐left右对齐right-->
（3）text-decoration
a {text-decoration:none;}
<!--取消a默认的下划线-->
css基础选择器及权重
一、基础选择器
用于选择标签
- 选择器分为基础选择器和复合选择器，基础选择器是由单个选择器组成的，基础选择器包括标签选择器、类选择器、id选择器和通配符选择器。
（1）标签选择器
标签名{
属性1：属性值1；
属性2：属性值2；
}
（2）类选择器
.类名{
属性1:属性值1；
}
使用时：
<div class="类名">
- 画盒子
- 多类名
在标签class中可写多个类名，需用空格隔开。
（3）id选择器
#id名{
属性1:属性值1;
}
使用时：
<!--只能调用一次！！-->
<div id="id名">
（4）通配符选择器
<!--自动给所有元素使用样式-->
*{
属性1:属性值1;
}
二、权重
块级元素和行内元素的特点及转换
一、块级元素
常见的块元素有h1~h6、p、div、ul、ol、li等
特点：
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注：文字类元素，如p、h1~h6，里面不能放块级元素
二、行内元素（内联元素）
常见的有a、strong、b、u、span等
特点：
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注：链接里不能放链接，但a标签里可以放块级元素
三、行内块元素
常见的有img、input、td等
特点：
- 和相邻行内元素在一行上，但之间会有空隙，一行可显示多个
- 默认宽度是本身内容的宽度
- 高度、宽度、外边距以及内边距都可以控制
四、相互转换
转换为块级元素：
a {
width:150px;
height:50px;
background-color:red;
**display:block;**
}
转换为行内元素：
display:inline;
转换为行内块元素：
display:inline-block;
css样式的三大特性
三大特性分别是层叠性、继承性和优先级
1、层叠性
原则：样式冲突，遵循就近原则
样式不冲突，不会层叠
2、继承性
子标签会继承父标签的某些样式，如文本颜色和字号。（text-、font-、line-、color可继承）
注：
body { <!--1.5是当前元素文字大小的1.5倍-->
font:12px/1.5 'Microsoft Yahei'
}
3、优先级
- 选择器相同，执行层叠性
- 选择器不同，根据选择器权重执行
注：继承的权重是0！
盒子模型
盒子模型的组成：边框（border）、实际内容（content）、外边距（padding）和内边距（margin）。
1、边框
注：
- 简写：border：1px solid red； 没有顺序
- 可分开设置：border-top(bottom.left.right)
- 边框会影响盒子大小
（1）表格
table,
td {<!--给表格线设置颜色-->
border:1px solid red;
}
border-collapse：collapse;
<!--合并相邻的边框-->
2、内边距
- padding-left(right/top/bottom)
- 简写
- 如果盒子已经有了宽度和高度，那么内边距会撑大盒子
- 如果盒子没有设置高度和宽度，则不会撑大盒子
3、外边距 - margin-top(bottom/left/right)
- 简写与padding相同
- 典型应用：让块级盒子水平居中
方法：盒子必须指定宽度，左右外边距都设置为auto
扫一扫
2832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
