一.css基本语法(style)
1. 格式
选择器{属性1:值1;属性2:值2}
单位:px—>像素 %—>百分比
基本样式:width(宽)、height(高) background-color(背景颜色)
注释:/* */
2. 内联样式与内部样式
内联样式:在html中标签上添加style属性实现
内部样式:在style标签内添加样式(可复用)
外部样式:创建css文本,文本写法:选择器{属性:值;}
a. <link>标签:页面于外部文件引入关系
通过link标签引入外部资源,rel属性指定资源跟页面关系,href属性资源地址
rel属性值查看网上:https://www.w3school.com.cn/tags/att_link_rel.asp
值为:stylesheet 外部样式表
b. <style> @import url('文件路径');</style>
3. css颜色表示法
1.单词表示法:red、blue、green等
2.十六进制表示法:#000000 等
3.rgb三原色表示法:rgb(255,255,255)取值范围0~255
4. css背景样式
backgound-color:背景颜色
backgound-image:背景图片 url(地址) 默认水平垂直铺满
backgound-repeat:背景图片平铺方式 repeat-x repeat-y repeat(x,y)
backgound-postion:背景图片位置 x y (center、left、right、top、bottom)
backgound-attachmennt:背景图滚动条移动方式 srocll(跟着滚,默认) fixed(不滚动)
5. css边框样式
border-style:边框样式 solid(实线) dashed(虚线) dotted(点线)
border-width:边框大小(px)
border-color:边框颜色(可指定位置边框进行设置)
ex:边框三角形
<style>
div{width:0px;heigth:0px;border-style:solid;border-right-width:30px;}
</style>
<div></div>
6. css文字样式
font-family:字体类型(可设置多个备用)
font-size:字体大小 默认16px 注:一般字体大小为偶数
font-weight:字体粗细 模式:正常(normal) 加粗(bold) number(100~900)
font-style:字体样式 默认:正常(normal) 斜体(italic、oblique)
区别:(1)italic:所有带有倾斜属性字体可以设置
(2)oblique:没有倾斜属性字体也可以设置
color:字体颜色
7.css段落样式
text-decoration:文本修饰(可多个,空格隔开)
underline:下划线 line-through:删除线 overline:上划线 none:无
text-transform:文本大小写(针对英文段落)
lowercase:全小写 uppercase:全大写 capitalize:首字母大写
text-indent:文本缩进 (默认一个字16px)
em单位:相对单位,1em永远跟字体大小相同
text-align:文本对齐方式
left、right、center、justify(两端对齐)
line-height:行高 (由上边距、字体、下边距构成)
取值:(1)number(px) (2)scale(比例值,跟文字大小成比例)
letter-spacing:定义字间距(px)
word-spacing:词之间间距(每个单词)
英文和数字不自动折行问题:
1.word-break:break-all;非常强烈的折行
2.work-wrap:break-word;不是那么强烈折行,会产生一些空白区域
8.css复合样式
(1)background:red url() repeat x y (无顺序)
(2)border:1px red solid (无顺序)
(3)font:weight style size/line-height family (顺序写,最少有size family)
注:尽量不要混写,非要混写,那么一定先写符合再写单一样式