1,div与span标签
2.css基础语法
1.格式:选择器{属性1;值1;属性2;值2}
2长度单位:px→像素(pixel)、%→百分比
eg:
外容器1:→600px 当前容器50%→300px
外容器2→400px 当前容器50%→200px
3.基本样式:width 宽、height高、background-color背景颜色
4.css注释:跟html没有区别/* 知识的内容*/
3、内联样式与内部样式
css样式的映入方式
1.内联(行内、行间)样式
在html标签上添加style属性来实现的
2.内部样式
在*<style*标签内添加的样式
区别:内部样式的代码可以服用,符合w3c的规范标准,尽量让结构和代码分开处理。
4、外部样式:
引入一个单独的css文件,name,css
通过< ink>标签引入外部资源 rel属性指定资源跟页面的关系,href属性资源的地址
5.css中的颜色表示法
1.单词表示法:red、blue green yellow等等
2.十六进制表示法:0 1 2 3 4 5 6 7 8 9 a b c d e f
3.rgb(红绿蓝)三原色表示法:rgb(三色的取值范围)
取值范围:0~255
4.使用提取颜色的下载地址或者使用photoshop工具.
6.css中的背景样式.
1.background-color:背景颜色
2.background-image:背景图片
ur1(背景地址) 默认:会水平垂直都铺满背景图
3.background-repeat:背景图片的平铺方式
repeat-x
repeat-y
repeat(x,y都进行平铺,默认值)
no-repeat(都不平铺)
4.background-position:背景图片的位置
用法:x y :number (px或%都可以)
或x:left,center,right
y:top,center,bottom
5.background-attachment:背景图随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed:(背景位置是按照浏览器位置进行偏移的)
加滚动条的方式:
7css边框样式
1.border-style:边框的样式
solid:实线
dashed:虚线
dotted:点线
2.border-width:边框的大小
3.border-color:边框的颜色 (透明颜色:transparent)
注:针对某一条边进行单独设置:border-left -style(中间是方向 left 、right、top、bottom)
8.css文字样式
1.字体类型
font-family:字体类型
eg英文字体: Arial , ‘Times New Roman’
中文字体:微软雅黑,宋体
<title>文字样式</title>
<style> #div1{font-family:"Times New Roman";} #div2{font-family:"方正舒体","宋体"}
</style>
</head>
<body>
<div id="div1">Arial</div>
<p>默认Arial</p>
<div id="div2">方正舒体</div>
<p>默认微软雅黑</p>
2.衬线体和非衬线体
注意事项:1.添加多字体 2.引入引号
3.字体大小粗细
1.font-size:字体大小
默认大小:16px
写法(一般设置成偶数):div{font-size: 60px;}
2.font-weight:字体粗细
模式:正常(normal) 加粗(bold)
写法:单词(normal、bold)或者number(100~500都是正常的,600 ~900都是加粗的)div{font: weight bold/ 300px;}
3.font-style:正常(normal)斜体(italic)
写法:单词(normal、italic)div{font-style:oblique;color:red}
9.css段落样式
1.text-decoration:文本修饰
下划线:underline
删除线:line-through
上划线:overline
不添加任何修饰:none
注:可添加多个文本修饰:通过空格隔开
写法: p{text-decoration: overline underline line-through;}
2.text-transform :文本大小写(针对英文段落)
小写:lowercase
大写:upercase
之针对首字母大写:capltalize
写法: p{text-transform: uppercase;}
3.text-indent:文本缩进
首行缩进
em单位:相对单位1em永远都是跟字体大小相同。
写法:p{font-size:1em; text-indent: 25px;}
4.text-align:文本对齐方式
对齐方式:left,right,center,justify(两端点对齐)
写法:p1{text-align:right}
5.line-height:定义行高
一行文字的高度上边距和下边距是等价关系。
默认行高:不是固定值,而是变化的。根据当前字体的大小不断地变化
取值1.number(px)2.scale(跟文字大小的比例值)
写法:p{line-height: 30px;
6letter-spacing:定义字之间的间距
word-spacing:定义定义英文词之间的间距
强制折行:(针对英文)
若英文和数字不自动折行:
7word-break:break-all(强烈执行):
word-wran:break-word:会产生一些空白区域
写法:p{width: 330px; height:600px;border:1px solid;border-color:red; word-break:break-all}
10.css复合样式。
一个css属性值控制一种样式,叫做单一样式。
一个css属性控制多种样式,叫做复合样式。
复合的写法是通过复合的方式实现的
复合写法有的是不需要关心顺序的例如:background,border。有的是需要关心顺序的,例如:font( *注:最少有两个值 size family * )
1.background、border、font:
注意:font中size在family前面
weight style size family √
style weight size family √
weight style size/line- height family √
一般不要与单一样式混写,若非要混写则先写复合样式再写单一样式,防止样式被覆盖。
写法:div{width: 60px;height:60px; background:red url(../images/购物车.png)no-repeat center center border-right: 6px black dashed ;font:bold 30px 方正舒体 ;
展示:
11.css选择器
1.ID选择器:
css:#elem{ }
html:id=“elem”
注:1.id是唯一值,出现多次是不符合规范的
2.命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)
3.命名方式:驼峰式写法:searchButton
短线写法:search-small-button
下划线写法:search_small_button
12.class选择器
.elem{ }
css:elem{ }
html:class=“elem”
注意1.class选择器是可可以复用的。
2.可以添加多个class样式。
3.多个样式的时候,样式的优先级根据css决定,而不是class属性中的顺序
4.标签+类的写法
<style>
p.box{background:red}
.box{background:yellow}
</style>
</head>
<body>
<div class="box">这是一个块</div>
<p class="box">这是又一个块</p>
<div class="box">这又又是一个块</div>
</body>
展示:
13.标签选择器(TAG选择器)
div{ }
< div>< /div>
使用的场景:
1.去掉某些标签的默认样式时
2.复杂的选择器中,如层次选择器
14.群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的css样式,来达到代码的复用。
15.配速选择器
*{ } -> div,ul,li,p,h1,h2…{}
注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。
使用的场景:
1.去掉所有标签的默认样式时
16.层次选择器
后代: M N( ) ul li{border:1px red solid;}
在这里插入代码片
父子: M>N #list >li{border:1px red solid;}
兄弟 : M~N div~h2{background: red;}
当前M下的所有兄弟N标签
相邻:M+N{}div+h2{background: red;}
当前 M下面相邻的N标签
17.属性选择器
M[attr]{ }
= :表示部分匹配
*=:完全匹配
^=:起始匹配
$=:结束匹配
div[class$=search]{background-color: red;}
......
<div>aaaaa</div>
<div class="box-search">bbbbb</div>
<div class="search-box">ccccc</div>
18.伪类选择器
1.css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加。
写法:M:伪类{ }
:link 访问前的样式(只能添加给a样式)
:visited 访问后的样式(只能添加给a样式)
:hover 鼠标移入时的样式(可以添加给所有样式)
:active 鼠标按下时的样式(可以添加给所有样式)
注:
- link visited只能给a标签加, hover和active 可以给所有的标签加。
2.如果四个伪类都生效,一定要注意顺序: LV H A。
3.一般网站只这样去设置: a{} a:hover{}.
写法:
`a{color: gray;}
a:hover{color:red}`
.....
`<a href="">这是一个链接</a>`
展示:
2.:after、:before通过伪类的方式给元素添加一段文本内容。使用content属性
写法:
div:after{content:"world";color:red;}
...
<div>hello</div>
3.:check、:disabled、:focus 都是针对表单元素的
:disabled{width:100px;height:100px}
......
<input type="text" disabled>
<input type="text">
<input type="text">
4.结构性伪类编辑器
:nth-of-type()、:nth-child()
角标是从1开始的,1表示第一项,2表示第二项
除此之外还可以取n值:表示从0到无穷大(2n表偶数)
li:nth-of-type(3){background-color: red;}
......
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
:first-of-type()、:first-shild 第一个被标注样式
last-of-type()、:last-child 最后一个被标注样式
:only-of-type()、:only-child 只有一个才生效