css基础
云端漂移 2019-12-29
目录
1.css概述
* CSS 指层叠样式表(Cascading Style Sheets), 是用来美化html标签的
2. html引入css的3种方式
* 【外链式】html引入css样式表的位置
<head>
<link rel="stylesheet" type="text/css" href=""/>
</head>
* 【行内样式】
<h1 style="font-size:20px;color:red;" >文本</h2>
* 【内嵌式】
<head>
<style type="text/css">
样式表写法
</style>
</head>
* 三种写法特点:
- 内嵌式写法，样式只作用于当前文件，没有真正实现结构表现分离。
- 外链式写法，作用范围是当前站点，谁调用谁生效，范围广，真正实现结构表现分离。
- 行内样式表，作用范围仅限于当前标签，范围小，结构表现混在一起。 （不推荐使用）
3.css的选择器
* 选择器 {
属性名:属性值;
属性名:属性值;
}
* 属性
属性 解释
width:20px; 宽
height:20px; 高
background-color:red; 背景颜色
font-size:24px; 文字大小
text-align:left | center| right |justify 内容的水平对齐方式
text-indent:2em; 首行缩进
color:red; 文字颜色
word-spacing:20px 英文单词的间隔
letter-spacing; 字符(英文字母和中文)之间的间隔
* 基础选择器--标签选择器
<head>
<style type="text/css">
/* 注释 */
div {
font-size:20px;
color:red;
background-color:green;
width:300px;
height:200px;
}
</style>
</head>
<div>文本一</div>
<div>文本二</div>
* 颜色的显示方式
- 直接写颜色的名称，比如red，yellow，pink
- 16进制显示颜色 #000000; 前2为代表红色，中间2位代表绿色，后边2位代表蓝色。
** 或 color:rgb(255,68,0); 或#F40
** #000黑色 #009900深绿色 #fff白色 #333深灰色 #eee浅灰色
** 可以使用firework吸取颜色
** color:rgba(255,255,0,0~1); 0完全透明 0.5半透明
* 基础选择器--类别(class)选择器
<head>
<style type="text/css">
/* 注释 */
.one {
font-size:20px;
color:red;
width:300px;
height:200px;
}
.two {
background-color:green;
}
</style>
</head>
<div class="one two">文本一</div>
<p class="one">文本二</p> - 特点：
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。
- 类选择器命名规则
◎不能用纯数字或者数字开头来定义类名
◎不能使用特殊符号或者特殊符号开头（_）来定义类名
◎不建议使用汉字来定义类名
◎不推荐使用属性或者属性的值来定义类名
- 常用的css命名推荐
头：header
内容：content/container
尾，页脚：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
版权：copyright
滚动：scroll
* 基础选择器--id选择器
- 写法：#自定义名称{属性:值;}
- 特点：
** 每个id命名都是唯一的。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
** 一个标签只能调用一个ID选择器。
** 一个标签可以同时调用类选择器和ID选择器。
* 基础选择器--通配符选择器(了解，不推荐使用)
- *{属性:值;}
- 特点：给所有的标签都使用相同的样式。
- 不推荐使用，增加浏览器和服务器负担。
- 为了方便，有时这样使用
*{
margin:0;
padding:0;
}
4.复合选择器
* 交集选择器
- 格式：标签+类（ID）选择器{属性：值；}
- 例子：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size:50px;
}
div.box{ /* <div class="box"> */
color:red;
}
div#miss{ /* <div id="box"> */
width: 400px;
height: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="box">aaa</div>
<p class="box">bbb</p>
<div id="miss">ccc</div>
</body> * 后代选择器
- 格式：选择器+空格+选择器{属性：值;}
- 后代选择器首选要满足包含（嵌套）关系。
- 父集元素在前边，子集元素在后边。
- 特点：
** 【无限制隔代】
** 只要能代表标签，标签、类选择器、ID选择器自由组合。
* 子代选择器(了解，一般可以用后代选择器替代)
- 格式：选择器>选择器{属性:值;}
- 选中【直接下一代】元素。
- 例子：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
}
</style>
</head>
<body>
<div>
<p><span>xxx威武</span></p>
<span>xxx霸气</span>
</div>
</body> * 并集选择器
- 格式：选择器,选择器,选择器{属性:值;}
- 例子：
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
box,#miss,span,h1{
font-size:100px;
color: #fff;
background-color: green;
}
</style>
</head>
<body>
<div class="box">xxx威武</div>
<p id="miss">xxx霸气</p>
<span>xxx帅气</span>
<h1>xxx漂亮</h1>
</body>
5.文本相关的属性
* color:文字颜色
* font-size:16px; 文字大小
* font-weight:700; 文字粗细
- 值从100-900 文字加粗
- font-weigth:bold; 加粗，不推荐使用
* font-family:宋体|微软雅黑; 文本字体
* font-style:normal|italic 文本格式
- normal默认值
- italic 斜体
* line-height:40px; 行高
line-height:1.5; 1.5倍行高
* 属性连写(简写)
- font:[italic] [700] 16px/40px 微软雅黑;
- italic 700可以换顺序，后面的不能换顺序
- 文字大小和字体为必写项
* text-decoration:none无装饰, underline下划线, line-through 删除线, overline 上划线】
* text-align:left | center| right |justify 内容的水平对齐方式
- justify两端对齐
* text-indent:2em; 首行缩进
6.字体的表达方式
* 直接写中文名称：font-family: 微软雅黑;
* 写字体的英文名称：font-family: microsoft yahei;
* unicode编码：font-family: \5B8B\4F53
7.
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT