CSS引入
css的引入有三种方式,因为如果在html内写样式会不好维护,因此我们用css来。
1.内部
直接用标签的style属性名,内部设置css键值对。
如:
2.外部
在title标签下,head内写style标签。标签内写选择器,自上而下编译时,会将对应的标签设置对应的样式
如
p{
width:100px
}
3.外部引入css文件
在外部写css文件,文件内含有选择器,用link标签,href属性,交互,rel=stylesheet要写这个 Stylesheet -- 定义一个外部加载的样式表
标签上的属性名和属性值需要=‘’,属性之间用空格隔开,css样式无‘’,是:,可以用空格或者;隔开。
选择器
1.标签选择器
该选择器是以标签名写的选择器,所写的css样式会给到所有这个标签
p{ width:100px } <.style> ### 2.类选择器 该选择器是以每个标签的class属性的属性值来找。如下 <style> .a{ width:100px } <.style> <div class=" a"></div> class属性值可以写多个,以空格隔开,且style的class选择器.后只是一个类名,不能有多个。 <style> .a{ width:100px } .b{ height:100px } <.style> <div class=" a b"></div> ### 3.id选择器 <style> #a{ width:100px } <.style> <div id=" a"></div> 在html内每个标签的id的值一定是独一无二的,设置了id,在style内#id名,可以给对应的id的标签设置样式。但是一般不用id,id要给团队中做jjs的人来绑定事件,css不用id来设置样式。 ### 4.通配符选择器 通配符选择器只需要在style标签内写 <style> * { width:100px }会给所有在浏览器上显示的标签设置该样式。设置样式其实就是给标签的盒子啥的,以及直接内部的文字设置样式。不会给子级标签设置但是会继承。
div高宽以及独占一行
div不设置样式,div是在浏览器上是一个盒子存在,不设置就是宽度是父级宽度,高度是是内部多高。但是我们div这个盒子的高度和宽度是可以设置的,用css。仍是独占一行,所在宽度不能被
用。独占网页的一行。无论父级啥的,就是独占网页宽度哪一行。span标签无法独占一行
这些都是什么类型标签决定的。background-color是背景颜色,color是字体颜色。
div设置内部文字水平居中,缩进等,里面设置的文字是多个1111111111,这种会溢出。
不会溢出的文字,写在标签内,写满div盒子的宽度,就直接写下一行。溢出会打乱页面分布,在程序上写上下行,在页面体现是空格。无论是文字或是标签。
文字控制属性
font-size字体大小
属性值是数字+单位,一般网页的单位是px,不设置单位没有用哦。设置该样式会让对应标签内部文字的字体大小为该值。无论是否溢出都显示字体大小为该值。
如 font-size:10px
font-weight字体粗细
属性值是
1.100,200,300,400,500,600,700,800,900从浅到粗字体,
2.关键字bold加粗(对应数字700),normal正常(对应数字400,同等效果)
可以设置标签内部文字的粗细。
font-style字体倾斜
属性值是关键字italic倾斜,normal正常,不倾斜。
设置这些可以让标签对应文字是否倾斜,有些标签自己设置这些样式,但是当在css设置1时会
用css,css的样式设置宽度和html属性来设置宽度,css起作用。
line-height设置行高
当标签内的文字没有设置行高时,在下一行都如下图
编辑
一行文字和下一行文字挨着。但是如果设置行高后,一行文字于一行文字亦或时文字于下一行内容文字都是自带间隙的。
属性值有数字+px,单位只是px哦。
直接写数字,表示是文字字体的倍数
line-height:2
行高是上间隙+字体高度+下间隙,上下间隙一定是相同的。因此如果是一段行高和字体大小设置的都是一样的,求行高是字体高度+某两行文字之间的间隙。
如果多行文字,设置行高是div等标签的高度,第一行文字是标签垂直居中,不设置是从标签内容左上角开始。
编辑
font-family设置文字的字体
属性名是字体名,设置标签文字内的字体是什么类型。
编辑
该属性值可以写多个字体名,但是从左到右哪个有就用哪一个。可以写中文也可以是英文。
最后一个必须写字体库。sans-serif是表示字体库,无衬线字体,是会寻找相似的字体。
编辑
font复合属性
html和css都是叫属性。不过写法不同。
font属性值是按下面顺序写,如果有就按下面写,但是字号(字体大小),和字体值必须要写,如果不写,font属性设置无效。
编辑
text-indent文本缩进
text-indent设置文本每段首行缩进多少,不设置就不缩进。属性值可以是
1.数字+px
2.数字+em 1em是缩进当前文本字体大小。2em是缩进当前文本字体大小的2倍。
text-align文本水平对齐方式
标签上的文本写的时候每一行都是放到哪,
left--左对齐,文本开头对其左边
centre--每一行文本都是居中
right--每一行文本靠右
text-decoration文本修饰
该属性值是设置文字是否具有删除,上划线,下划线等。
属性值有以下四种。可以将标签内的文字设置为这种形式。
编辑
对于div盒子,在不溢出的情况下,文本对齐text-align和text-indent文本缩进是有效的,文本对齐方式是对于盒子来说的。
文字颜色
color是给文字设置颜色,background-color是设置标签背景色。