Css 基础知识
Css顾名思义就是层叠样式;(Cascading style sheets)的缩写;
但是什么什Css?
Html 描述了呈现的内容,而Css则是定义了这些内容的呈现样式;
列如:字体、颜色...
我们为什么要用到Css?
根据代码得出,Css能够将页面的内容和呈现方式有效的分离,有利于分工合作,也有利于快速更换不同的呈现方式;
Css样式代码如下:
<style>
p{
font-size: 30px;
color: aqua;
}
</style>
</head>
<body>
<p style="font-size: 24px;color: aqua">内联样式演示</p>
<p>内部样式演示1</p>
<p>内部样式演示2</p>
Css也有三种样式:
1)内联样式
内联样式主要定义在style属性中。内容和表现形式高度耦合;维护困难,不利于分工合作。定义的只能在当前标签中使用;
<p style="font-size:37px;color:red"></p>
通过在<head>标签中通过<style>标签来定义内容和表现形式的耦合程度降低!但是在HTml文件中,没有实现完全分离。只能应用在当前页面;
P{
font-size:36px;
color:aqua;
}
<p>内部样式演示1</p>
<p>内部样式演示2</p>
首先定义一个样式的文件(Css)
CSS中也可以使用注释,形式为/*......*/
<link rel="stylesheet"type="text/css"href="../Css/E101-01-02.css">
中引入。
颜 色
所有颜色都是用红(red)绿(Green)蓝 (blue)三种基色引发而来 ,这三种颜色成为三原色
Css中用8位表示一个颜色,那么可以表示28种颜色,即256种颜色,所以总共可以表示256*256*256种颜色( 真彩色),
Css中颜色表示
十六进制:#ff0000
RGB颜色
<p style="color:#800000;">十六进制颜色</p>
RGBA颜色
基础上加了透明度分量 Alpha
<p style="color: red;RGB(255,0,0 0.5)">十六进制颜色</p>
HSL颜色
颜色可以由另外三个分量进行表示,即色调,饱和度,明度;
<p style="color:HSL(120,60%,50%)">十六进制颜色</p>
HSLA颜色在HSL上增加了Alpha分量
<p style="color:HSLA(120,60%,50%,0.4)">十六进制颜色</p>
预定义颜色
Css提供了一些预定颜色 比如 red yellow blue
1.3 尺寸单位
Cm 厘米
Mm 毫米
In (lich)英寸
Px 像素(pixel):绝对单位
%:百分比: 相对单位
那些是绝对单位,那些是相对单位
Css属性
Background-color:red
P{
Background-color:red;
Font-size:24px;
}
字体属性:
Font-family 字体名称
Font-size 字体大小
Font-style 字形样式 倾斜
Font-variant 字体变形 (大写)
Font-weight 字体加粗样式
<style type="text/css">
p{/*font-family:楷体;
font-size: 66px;
font-style: italic;
font-variant: small-caps;
font-weight:500;*/
font: 60px楷体;}
</style>
也可以简写:
Font-size Font-variant Font-weight Font-size Font-family
前三个标红的可以省略不写,使用默认值Font-size Font-family 必须指定值;
这种书写方式更加简写;
font: 600px 楷体;
文本相关属性
文本属性主要包括颜色、对齐方式、修饰效果。
Color :设置文本的颜色;
Text-decoration:
none 默认值,没有装饰
underline 加下划线
Overline 文字上方
line-through 文字中间穿过线 加删除线
text-shadow 给文字加上阴影效果
text-shadow: -14px -12pxblueviolet;
含义是定义一个背景颜色,其水平方向向上移14px;垂直方向上移12px;
Direction方向左右
属性: ltr左至右rtl右至左
Text-align 对齐方式水平方向 4种属性
Left 左对齐
Right 右对齐
Center 居中
Justify 两端对齐
Vertical-align 文本垂直对齐方式
Top 靠上对齐
Bottom 考下对齐
Middle 居中对齐
Text-indent 文本缩进
Letter-spacing 字符和字符的间隔
Word-spacing 单词和单词之间的(字)间距
Line-height: 行高设置行和行之间的距离;实际上是调整行间距;
背景颜色
<styletype="text/css">
body{
background-color:peachpuff;
background-image:url("../Css/胖迪.jpg.jpg");
background-repeat:no-repeat;
background-repeat:repeat-x;
/*background-repeat:repeat-y;
background-repeat:round;*/
background-position:center;
}
</style>
Background-color :背景色
Background-image:设置背景图片,需要设置图片的url地址
Background-repeat:图片的复制选项
Repeat: 在水平和垂直的两个方向进行复制
No-repeat:不复制
Repeat-x: 在水平方向进行复制
Repeat-y: 在垂直方向进行复制
也可以将这组属性值封装到一个属性background中,表达书序是:
背景色 background-color
背景图片background-image
重复方式background-repeat
位置 background-position
表达更加整洁
background:yellow url("../Css/胖迪.jpg.jpg")no-repeat right;
2.4尺寸相关属性
Height 高度
Width 宽度
div{
width:600px;;
height:600px;
background-color:lightskyblue;
}
Max-width:最大宽度
Max-height:最大高度
Min-width:最小宽度
Min-height :最小高度
2.5 相关属性
隐藏元素方法:
Visiblity:hidden:仅仅隐藏内容该元素所占位置依然存在;
Display-none:不仅隐藏内容,且不占位置;
Display :可以设置他的显示模式;
Inline:
可以将块级元素以内联的形式进行显示;此时width和height属性无效其空间取决于元素的内容。
Inline-block:
将块级元素以内联形式显示,同时兼具块级元素的某些特征,列如可以使用width和height设置所占位置大小;
/* li{
display:inline-block;
width: 200px;
background-color: cyan;
}*/span{
display: block;
background-color: lime;
}
也可以将内联元素以块级元素形式进行显示,即display:block;
2.6盒子模型
Margin:边缘留白;外边距
Margin-top:margin-right:margin-bottom:
Margin-left:从上到右;从下到左;
使用方式:
Margin:30px;表示上下左右外边距都为30px;
Margin-left:30px分别单独设置上下左右外边距;
Margin:10px 20px 30px40px分别设置上右下左四个边距为10px20px 30px 40px;
Padding:内边距
也有上下左右边距,和margin类似;
Border:边框
border-width: 20px;
border-style: dashed;
border-color: antiquewhite;/*属性可以更优化optimize properties*/
border-width 边框宽度
border-style: 边框线条
border-color: 边框颜色
word 中设置边框操作
也可以使用更优化的书写方式
border: 5px dashed green;
2.7定位
定位方式:static静态
fixed 固定
related 相对
absolute 绝对
static静态定位(默认)
无定位、元素正常出现了流中;不受left、right、top、bottom影响;
显示效果
div{
width:500px;
height:500px;
background-color:maroon;
position:static;/*加或者不加static都是默认效果*/
}
#div1{
width:300px;
height: 300px;
background-color: maroon;
position: fixed;
}
#div2{
width:300px;
height:300px;
background-color:aquamarine;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
显示效果为
从结果可以看出,fix定位会将元素从流中单独进行定位中,摘出来单独进行定位,取决于left、top;
#div1{
width:300px;
height:300px;
background-color:antiquewhite;
position:fixed;
left:40px;
top:40px;
z-index:2;}
#div2{
width: 300px;
height: 300px;
background-color: aquamarine;
position:relative;
z-index:2;
重新定位之后可能出现重叠,通过z-indx可以调整其顺序
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color:antiquewhite;
}
#div2{
width:200px;
height:200px;
background-color:aquamarine;
position: relative;
top:30px;
left: 30px;
}
#div3{
width:200px;
height: 200px;
background-color:gold;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
从以上结果可以看出,相对定位是从原来的位置进行位移,但并不受影响其他后续位置;
从结果可以看出:绝对定位的元素将从分流中被摘出来,依靠left和right属性进行定位,与fixed类似,但参照物不同
Fixed参照物跟元素(html)
Absolute 参照父容器
3 选择器
所谓选择器,指得是选择施加到样式目标的方式。
3.1元素选择器
用标签名作为选择器,选中所有相应的元素
<style type="text/css">
div{font-size:30px;
color: cyan;
}p{
font-size:28px;
color: red; }
</style></head><body>
<div>元素选择器</div>
<p>元素选择器</p>
<p>元素选择器</p>
3.2id选择器
顾名思义就是根据id来选择元素;其定义形式为#idname{
......
}
<style type="text/css">
#div1{
width:200px;
height:200px;
background-color: cyan;}
#div2{
width:200px;
height:200px;
background-color: coral;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
3.3类选择器
类选择器是根据class属性来选择元素,器样式定义为:
.Classname{
.......
}
<style type="text/css">
.even{
width:200px;
height: 20px;
background-color: coral;
}
.odd{
width:200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
从结果可以看出:.odd{....}定义样式会施加到所有class=“odd”的元素中;
如上图列中的div第一个和第二个所示;
结果会选择所有的id选择器上面,当然也包括class=“odd”的<p>;
3.4属性选择器
根据某个属性的特性(比如有无、值等)来选择,
1)根据有无某个属性选择;
<style type="text/css">
[title]{
font-size:28px;
width: 100px;
height: 100px;
color: antiquewhite;
border:1px solid greenyellow;
}
</style>
</head>
<body>
<div title="odd">1</div>
<div title="even">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
运行结果:
从结果可以看出,所有具有title属性元素都应用了红色背景颜色的样式。
2)根据属性的值来选择
从结果可以看出来,只有第二个div应用了北京的样式,因为只有第二个div的title属性等于div2;
~=:选中属性值包含指定完整单词的元素,类似word中文字匹配;
title^=”div”:选中以div开头的元素
Title$=“div“选中title属性值以div结尾的属性;
Title*=“div“选中title属性值包含所有div的;