CSS样式1

目录

1.css

2.css样式引入

3.权重

4.文本字体(font,text)

5.列表(ul,ol)

6.背景(background)

---

1.css

                1.什么是css？
                    css是一种技术
                2.css有什么用？
                    css可以更加精准控制html元素。                    
                3.css怎么用？
                    css这个技术为我们提供了一整套专门用来控制html语言的样式
                    css的属性控制可以用在任意的html标签中

2.css样式引入

                    1.内嵌样式：
                        style="css属性名:css属性值;.....;"
                    2.内部样式:
                        <style>
                            选择器{
                                css属性名:css属性值;
                            }        
                        </style>
                    3.外部样式：<link href="base.css" rel="stylesheet" />

3.权重

                     通配符选择器 0000
                    标签选择器 0001
                    class选择器 0010
                    id选择器 0100
                    行内 1000
                    ！important 10000

4.文本字体(font,text)

1.浏览器默认大小为16px,字体为微软雅黑，浏览器识别的字体大小最小为12px   9pt=12px。
2.取色：<input type="color" />   颜色设置rgb(), rgba(0,0,0,1)最后一个a代表透明度，取0-1。
font-family:设置文本字体
font-weight(设置加粗):normal(正常字体),bold(粗体),bolder(特粗体),lighter(细体),100-900
font-style(设置倾斜):normal(正常字体),italic(斜体),oblique(倾斜的文字)
text-decoration(下划线):none(无,去除超链接下划线),underline(下划线),overline(上划线),line-through(贯穿线，删除线)
line-height(设置行高):行高与高度(height)一致的时候内容垂直居中。
text-align(文本对齐方式):left(左对齐),right(右对齐),center(居中)。
text-indent(首行缩进):单位px,em,rem,pt。 一般用作多行，line-height一般作用单行
letter-spacing ：设置文本英语单个字符或者中文之间的间隔
word-spacing: 设置英语单词与英语单词之间的间隔
font(复合属性，有顺序):font-style font-weight font-size(必填项)/line-height font-family(必填项)

5.列表(ul,ol)

list-style-type:disc(实心圆,默认),circle(空心圆),none(去除列表符号)
    list-style-image:url(图片逻辑) 图片符号
    list-style-position:inside(项目符号放在文本里面),outside(项目符号放在文本外面,默认)
    list-style(复合属性，无必填，无顺序) : list-style-image  list-style-position   list-style-type 

6.背景(background)

    

background-color(背景颜色):

background-image(背景图片):url();

background-size(背景大小):100% 100% , cover , contain; 第一个值代表宽度，第二个值代表 高度.contain: 背景图像在盒子里面最大的宽高比例，图片不会超出盒子范围。cover: 背 景图片完全覆盖背景，会超出盒子范围

background-repeat(背景平铺):repeat(平铺,默认)， no-repeat(背景图像不平铺) ，repeat-x(横 向平铺) ，repeat-y(纵向平铺)

background-position(背景平移位置):x  y;  x为x轴位置,y为y轴位置，只指定x的话，y 默认center居中

background-attachment(背景固定):scroll(默认,随内容滚动) ， fixed(固定)

background-origin(背景图片起点，左上角):padding-box(默认,内边距)，border-box(边框)， content-box(内容区)

background-clip(图片裁剪):border-box(默认，边框开始裁剪，背景被裁剪到边框内)， padding-box(背景被裁剪到内边距内)，content-box(背景被裁剪到内容区内),text。

background(复合属性,无顺序无必填): red url no-repect left center......多组用逗号隔开