css的使用
1.内联样式.标签内
在标签的内部使用style属性来指定css代码
* 例如：
<div style="color:red;">hello css</div>
2.内部样式.head内
在head标签内,定义style标签,style标签的标签体内容就是css代码
* 例如:
<head>
<style>
div{
color:bule;
}
</style>
<head>
那么所有的div标签里的元素颜色都被改变成了bule
3.外部样式
1.定义css的资源文件
2.在head标签内,定义link标签,引入外部的资源文件
*
例如
//在资源文件中(以.css结尾的文件名,假设为a.css)
div{
color:red;
}
//在html文件中
<head>
<link rel="stylesheet" href="css/a.css">//这里是路径
</head>
//那么所有引入的外部资源文件的html都会执行里面的css代码
cssy语法
- 格式
选择器{
属性名1：属性值1；
属性名2：属性值2；
…
} - 选择器：筛选具有相似特征的元素
- 注意：
每一对属性需要使用;隔开，最后一个可以不用
选择器
- 一般选择器
- id选择器：选择具体的id属性值的元素，建议在一个html页面中的id值唯一
- 语法：#id属性值{}
- 元素选择器：选择具有相同标签名称的元素
- 语法：标签名称{}
- 类选择器：选择具有相同的class属性值的元素
- 语法：.class属性值{}
- 注意：类选择和id选择都高于元素选择器的优先级
- 扩展选择器
- 选择所有元素：
- 语法：*{}
- 并集选择器：
- 语法：选择器1，选择器2{}
- 子选择器：筛选选择器1下的选择器2：
- 语法：选择器1 选择器2{}
- 父选择器：筛选选择器2的父选择器1：
- 语法：选择器1>选择器2{}
- 属性选择器：选择元素名称，属性名=属性值元素：
- 语法:元素名称[属性名=“属性值”]{}
- 事例：常用于区分input
<style>
input[type='text']{
border: 5px solid;
}
</style>
<body>
<input type="text">
<input type="password">
</body>
//效果就是只有是input的标签，并且type为‘text’的才会嘿css操控
- 伪类选择器：选择一些元素具有的状态：
- 语法:元素:状态{}
- 例如: <a> 【超链接】
- 状态:
- link:初始化状态
- visited:被访问状态
- active:正在访问状态
- hover:鼠标悬浮状态
- 状态:
- 事例:
<style>
a:link{
color:pink;
}
</style>
//效果就是在body里面的<a>标签的类容初始化为粉色的
属性
1.字体，文本
- font-size:字体大小
- color：文本颜色
- text-align：对齐方式
- line-height：行高
2.背景 - background
3.边框 - border：设置边框
4.尺寸 - width：宽度
- height：高度
5.盒子模型：控制布局 - margin：外边框
- padding：内边框
- 默认情况下内边距会影响整个盒子的大小
- box-sizing：border-box；设置盒子的属性，让width和height就是盒子的固定大小
- float：浮动
- letf
- right
1185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
