PS:此文章仅用于监督自己的学习,望大佬轻喷
一、css层叠样式:
用来美化网页,做到结构(html)和表现(css)分离
二、基本语法:
选择器 {
属性:属性值;
}
三、css的四种引用方式:
1、行间样式:直接在标签上书写样式
<div style="color:olive;width: 100px;border:1px solid blue;">行间样式测试1</div>
2、内部样式:在文件内部书写样式
<style>
样式内容
</style>
<style>
p{
background-color: #eeeeee;
font-size: 18px;
font-style: italic;
}
</style>
3、外部样式:(1)、先创建一个css文件;(2)、再用link标签引入这个文件
创建一个css文件:
span{
font-size: 20px;
color: aquamarine;
display: block;
}
link引入:
<link rel="stylesheet" href="css/style.css">
4、导入外部样式:(1)、先创建一个css文件;(2)、再style标签中用import导入这个样式文件
创建和上面一样
然后import引入
<style>
@import "css/test.css";
</style
注:用.box{文字内容}*数字加Tab可以快速写div标签,数字3就是3行div
四、以上四种css引用方式的区别:
行间样式只作用于当前标签;而内部样式作用于当前文件;外部样式可以被多个html文件引用(最多使用;结构分离)。
外部样式分为link引入和import引入两种方式
提示:
1、link是xhtml标签,除了加载css外,还可以定义RSS等其他事务;@import属于css范畴,只能加载css。
2、link引用css时,在页面载入是同时加载;@import需要页面网页完全载入后加载。
3、link是xhtml标签,无兼容问题;@import是在css2.1提出,低版本的浏览器不支持。
4、link支持使用javascript控制DOM区改变样式;而@import不支持。
五、css选择器分类:
1)、*:匹配html中所有元素(注意:*的性能差,因为它要匹配所有元素)
*{
color:blue;
}`
2)、标签选择器:用来匹配对应的标签
span{
display: block;
margin-right: 20px;
border: 1px solid red;
font-style: oblique;
color: red;
}
3)、类选择器:用来选择class命名的标签
.wrapper{
color: green;
font-style: italic;
}
4)、ID选择器:用来选择id命名
#content{
color: hotpink;
font-style: initial;
font-size: 20px;
}
5)、派出选择器:根据上下文来确定选择的标签
.box1 li{
color: khaki;
}
.box2 li{
color: lightsalmon;
}
以上代码:
运行:
六、选择器分组:
让多个选择器(元素)具有相同的样式,一般用于设置公共样式
h1,.box,p{
color: orange;
}
如下:
运行:
这里和h1和div都为橘黄色 ,而p标签进行覆盖后变为蓝色
七、选择器的继承: 子元素可以继承父元素的样式,反之不行
这里和c++的继承类似,具体等之后练习再深究
八、优先级:
内联样式>内部样式>外部样式
样式权重:!import(10000)>内联样式(1000)>ID选择器(100)>伪类选择器(10)>标签选择器(1)
加了!import之后权重最大,样式为红色:
样式权重可以用在选择器分组中,这里没太弄明白
九、CSS字体
1)、font-size:字号
font-size:设置文本大小
属性值:1、{number+px}:固定尺寸像素
2、{number+%}:其百分比是基于父对象中字体的尺寸大小
2)、font-family:字体
font-family:设置文本字体
p{font-family:Courier,"Courier New",monswpace}(其中如果浏览器不支持第一种字体,则用后面两种,如果都不支持,则使用浏览器默认字体。其中有空格的化要用""括起来)
3)、font-style:样式
font-style:设置文本字体样式
p{font-style:normal;}(正常字体)
p{font-style:italic;}(斜体)
p{font-style:oblique;}(倾斜的字体)
4)、font-weight:加粗
font-weight:设置文本的粗细
示例:
p{font-weight:normal;}(默认值,正常字体)
p{font-weight:bold;}(粗体)
p{font-weight:bolder}(比bold粗)
p{font-weight:lighter;}(比normal细)
{100-900} p{font-weight:600}:定义由粗到细的字符。400等同于normal,而700等同于bold
5)、line-height:行高
示例:
p{line-height:normal;}(默认值,正常字体)
p{line-height:24px;}(指定行高为长度像素)
p{line-height:1.5;}指定行高为字体大小的倍数
6)、color :字体颜色
示例:
p{color:red;}(颜色名称指定)
p{color:rgb(100,14,200);}(指定颜色为RGB值)(r:0-255;g:0-255;b0-255/16进制(以#开头,后跟6位(#rrggbb)或3位(#rgb)16进制数))
p{color:#345678;}(指定颜色为16进制)
7)、text-decoration:文字修饰
text-decoration:设置文本字体的修饰
示例:
p{text-decoration:normal}(默认值,无修饰)
p{text-decoration:underline;}(下划线)
p{text-decoration:ling-through;}(贯穿线)
p{text-decoration:overline;}(上划线)
8)、text-align:文本对齐方式
示例:
p{text-align:left}(左对齐)
p{text-align:center;}(居中)
p{text-align:right;}(右对齐)
9)、text-transform:字母大小写
示例:
p{text-transform:capitalize;}(将每个单词的第一个字母转换成大写)
p{text-transform:uppercase;}(转换成大写)
p{text-transform:lowercase;}(转换成小写)
10)、text-indent:文本缩进
示例:
p{text-indent:24px;}(首行缩进number像素)
p{text-indent:2em;}(首行缩进number字符)
注:font复合属性:
font:font-style font-variant font-weight font-size/;ine-height font-family;
注意:1)属性值的位置顺序
2)除了font-size和font-family之外,其他任何一个属性值都可以省略
3)font-variant:normal/small-caps(让大写字母变得小一些)
一些常用的属性,先记下来。。。
今天到这了,公务员省考后天开始报名了(要考试的小伙伴不要忘了);莫名紧张。
感觉css东西很多,现在框架有点乱,买了《css揭秘》,慢慢来吧