css基础

css由k=v变成了k: v

css嵌入html的方式

<div style="border: 10px solid red; background-color: green; text-align: center; width: 100px">臭宝</div>
这是css嵌入html的第一种方式
直接在标签里写属性

<style>
    div{
        border: 10px solid red;
        background-color: green;
        text-align: center;
        width: 100px
    }
</style>
这是css嵌入的第二种方式,写在head中

<link rel="stylesheet" type="text/css" href="../cssCode/cssStudy1.css"/>
css源文件:
div{
    border: 10px solid red;
    background-color: green;
    text-align: center;
    width: 100px
}
在head中使用link标签引入
这是css引入的第三种方式


css属性:
文字三属性:color font-size font-family
盒子三属性:height width background-color

1.color->color:this_color
颜色有颜色名字表示法,16进制表示法,rgba

2.font-size:
不同浏览器的默认值不同,一般来说用的是px为单位

3.font-family:
设置文字的字体,在引号内,多个用逗号隔开,前面识别不出来识别后面的
中英文混合需要同时进行设置
常用:
微软雅黑,宋体
Arial, consolas

p {
    color: #ff7d20;
    font-size: 30px;
    font-family: 楷体, 微软雅黑 Light, serif;
}

4.height width 都是以px为单位
5.background-color与color类似


css样式表:
行内式-->嵌入html方式1
内嵌式-->嵌入html方式2
外链式-->嵌入html方式3
导入式(了解)
<style>
    @import url(../cssCode/cssStudy1.css);
</style>


css选择器:
标签选择器可以决定那些标签有哪些属性
ul {
    width: 500px;
    height: 50px;
    list-style: none;
}

id选择器用的是#
#id1 {
    width: 500px;
    height: 50px;
    list-style: none;
}

类选择器用的是.

.class1{
    key: value;
}

后代选择器
用空格

交集选择器:
把两个交起来，两个必须同时满足
ul li.qian{
    background-color: cornflowerblue;
}

并集选择器:
用的是,

css继承性:
父类中设置有关文字的可以被子类继承

css层叠性,如果设置了同样的属性,刚才的属性被覆盖掉了
权重:id选择器>类名选择器>标签选择器
遇到复杂选择器,书选择器的数量,按权重进行比较，数量多的获胜
如果都一样,后写的覆盖先写的

超链接设置：
text-decoration:主要用途是去掉超链接的下划线
underline:加上下划线
overline:加上上划线
line-through:加上删除线
blink:使文字闪烁
none:不显示上述任何效果

背景:
1.背景颜色：
background-color:参数
2.背景图片:
background-image:url(url)
3.背景照片重复:
background-repeat:参数
repeat-x:水平固定
repeat-y:垂直方向上固定
4.背景照片固定:
background-attachment:参数

区块:
1.单词间距:word-spacing:间隔距离
2.字母间距:letter-spacing:字母间距
3.文本对齐:
text-align:参数
参数的取值:
left:左对齐
right:右对齐
center:居中对齐
justify:相对左右对齐
4.垂直对齐:
vertical-align:参数
top:对齐
bottom:底对齐
text-top:相对文本顶对齐
text-bottom:相对文本底对齐
baseline:基准线对齐
middle:中心对齐
sub:下标的形式对其
super:上标的形式对齐
5.文本缩进:
text-indent:缩进的距离
12px相当于一个文字的距离
6.空格:
white-space:参数
normal:正常
pre:保留
nowrap:不换行
7.显示样式:
display:参数
block:块级元素
inline:在对象前后都不换行
list-item:在对象前后都换行,增加了符号项目
none:无显示

方框:
height:高度
width:高度
padding:内边距
margin:外边距
float:浮动
clear:清除浮动

边框:
边框样式:
none:无边框
dotted:边框为点线
dashed:边框为长短线
solid:边框为实线
double:边框为双线
width:宽度
color:颜色

鼠标：
hand:手型
crosshair:十字形
text:文本型
wait:沙漏型
move:十字键头型
help:问号型
e-resize:右箭头型
n-resize:上箭头型
nw-resize:左上箭头型
w-resize:左箭头型
s-resize:下箭头型
se-resize:右下箭头型
sw-resize:左下箭头型