鸩羽千夜

03usedStyle.md

goer ... 2022-01-05 Css
  • Css
 大约 5 分钟
CSS 常用样式

[toc]

# usedStyle：

# (1).字体样式

设置字体相关的

  1. @font-face

    自定义字体，用法如下

    @font-face{ 兼容所有浏览器
    font-family:bbb;       --- 自定义字体名称
    src:url("dafsfd.ttf")  --- 自定义字体的路径
}
p{
    font-family:'bbb';
}
    1
    2
    3
    4
    5
    6
    7

  2. font-family

    设置文本字体，默认值 微软雅黑

    font-family:"楷体";
    1

  3. font-size

    设置文本字体大小，默认值16px

    font-size:30px;
    1

  4. font-weight

    给文本加粗 normal(不加粗 默认) bold(加粗)

    font-weight:bold;
    1

  5. font-style

    给文本加斜体， normal(不加斜体) italic(加斜体)

    font-styel:italic
    1

  6. color

    color 加颜色， 这个就不说了吧 一般用十六进制颜色表示

  7. text-decoration

    给文本加线条

    value explain
    none 不加线条
    underline 加下划线
    overline 上划线
    line-through 删除线

  8. text-shadow

    文本加阴影

    第一个值：阴影的水平位置,负左正右
第二个值：阴影的垂直位置,负上正下
第三个值：阴影的模糊距离,值越大越模糊
第四个值：阴影的颜色
p{
	text-shadow:3px 3px 10px green;
}
    1
    2
    3
    4
    5
    6
    7

# (2).元素样式

给元素设置样式

  1. width

    给元素设置宽度

    div{
    width:100px;
    height:100px;
}
    1
    2
    3
    4

  2. height

    给元素设置高度 同上

  3. 盒子模型

    首先我们了解下盒子模型：

    每个元素都可以看做一个盒子，我们设置盒子高宽是不包括边框的，只单单是内容的高宽

    https://www.w3school.com.cn/i/css/boxmodel.gif

    margin+border+padding+width:宽

    margin+border+padding+height:高

    拓展：box-sizing:border-box;

    设定的宽度和高度：包含了内边距和边框和内容的宽高
div{
    box-sizing:border-box;
    width:300px;
    height:300px;
    注:这里的宽就包含了 padding(左右)+border(左右)+width(内容的)
    			高：padding(上下)+border(上下)+height(内容)
}
    1
    2
    3
    4
    5
    6
    7
    8

  4. margin 外边距

    元素和元素之间的距离，或者元素和页面边框之间的距离

    margin-top,margin-right,margin-bottom,margin-left
上右下左 ---- 距离四个边的距离

缩写： auto(自适应)
margin:top right bottom left;
margin:20px;

margin:0 auto; 居中
    1
    2
    3
    4
    5
    6
    7
    8

  5. padding 内边距

    元素和边框之间的距离：设置或会改变元素的宽高

    左右内边距会改变宽度,设置了左右内边距之后要修改元素宽度
上下内边距会改变高度,设置了上下内边距之后要修改元素高度
    1
    2

  6. opacity 透明度

    范围是0-1,0是全透明,1是不透明

    h2{
	opacity:0;
}
h2:hover{
	opacity:1;
}
    1
    2
    3
    4
    5
    6

# (3).边框样式

设置边框样式：使用left/right/top/bottom单独设置上下左右的边框

  1. border-style

    设置边框线的样式

    value explain
    none 无边框
    dotted 虚线 ，由点组成
    dashed 虚线 ， 由小线段组成
    solid 实线 最常用
    h4{
    border-style:solid;
    border-top:none;
    border-bottom:dashed;
}
    1
    2
    3
    4
    5

  2. border-width

    边框线粗细

    p{
    border-width:3px;
}
    1
    2
    3

  3. border-color

    边框线的颜色

    h2{
    border-top-color:blue;
}
    1
    2
    3

可以缩写的：(熟练的同学)

border:1px solid blue;

border: width style color;(顺序好像无关)

  1. borer-radius

    边框圆角(css3的)

    值是  左上开始顺时针
border-radius:10px 5px 10px 5px
border-radius:50%; 圆形
    1
    2
    3

  2. box-shadow

    盒子阴影（css3）

    第一个值：阴影的水平位置,负左正右
第二个值：阴影的垂直位置,负上正下
第三个值：阴影的模糊距离,值越大越模糊
第四个值：阴影的大小
第五个值：阴影的颜色
第六个值：不写第六个值默认外投影,设置了值inset变成内投影,一般不加
p{
	box-shadow:3px 3px 5px 4px color;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9

# (4).段落样式

设置段落样式，遇到文字，可以先用行高撑开

  1. line-height

    设置文字行高

    em单位， 1em=当前文本的font-size大小
默认font-size=16  所以 mor 1em=16px

可以让文本上下居中
{	
	height:20px      line-height=height
	line-heigth:20px
}
    1
    2
    3
    4
    5
    6
    7
    8

  2. text-indent

    段落缩进 （可以代替单行文本的左内边距使用）

    h3{
	text-indent:40px;
	==padding-left:40px  padding会撑大盒子
}
    1
    2
    3
    4

  3. text-align

    水平位置 == align

    {
    text-align:center/left/right;
}
    1
    2
    3

  4. letter-spacing

    文字和左右文字的之间的距离 vlaue=数字px

    p{
    letter-spacing:10px;
}
    1
    2
    3

  5. text-overflow

    文字溢出处理

    p{  很多很多文字
    white-space: nowrap;/*条件1：强制在同一行显示*/
    overflow:hidden;/*条件2：超出部分隐藏*/
    text-overflow:ellipsis;/*文字溢出后显示...*/	
}
    1
    2
    3
    4
    5

  6. word-wrap:break-word;

    英语单词换行 （为了更好的认出完整单词让下个单词换行）

    <p>hello world!</p>
p{
    word-wrap:break-word;
}
    1
    2
    3
    4

# (5).背景样式

  1. background-color

    背景颜色：要用十六进制噢

    background-color:#fff;
    1

  2. background-image

    背景图片和渐变颜色

    背景渐变 value
    line-gradient (线性渐变) 水平 to top right (右上)
    radial-gradient (径向渐变) 从圆心开始 比例
    div{
    background-image:linear-gradient(to right, red 10%, gredd 30%, blue 60%)
    background-image:radial-gradient(red 10%, blue 50%，black 40%)
}

# 背景图片
div{
    background-image: url(地址);
    background-repeat:no-repeat;
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  3. background-repeat

    背景图片平铺方式

    value explain
    repeat 全部平铺(默认)
    repeat-x 横向平铺
    repeat-y 纵向平铺
    no-repeat 不平铺

  4. background-origin

    背景圆点

    value explain
    border-box 背景图片左上角从边框外边开始
    padding-box 背景图片左上角默认从边框内边开始
    centent-box 背景图片左上角从内容开始

  5. background-size

    背景图片大小

    第一个值是图片的宽度 第二个值是图片的高度 只设置第一个宽度,高度会自动适应

  6. background-clip

    背景图片裁剪

    value explain
    border-box 保留包含边框区域的背景图片
    padding-box 保留不包含边框区域的背景图片
    centent-box 只保留内容部分的背景图片

  7. background-position

    背景图片位置 (默认左上角)

    同时写两个值,使用空格隔开
第一个值是水平位置,数值、left、center、right
第二个值是垂直位置,数值、top、center、bottom
p{
    background:url(地址) no-repeat center center;
}
    1
    2
    3
    4
    5
    6

背景也可以缩写的

background:url(地址) no-repeat center center 40px;

background: image() repeat position size;

# (6).列表样式

  1. list-style-type

    控制列表前面的符号 none取消

    ul li{
    list-style-type:none;  //前面我们学的列表符号也可以用
}
    1
    2
    3

  2. list-style-image

    自定义图片当做符号 , 列表图标

    li{
    list-style-image:url(sdaf.jpg);
}
    1
    2
    3

  3. list-

    列表符号的位置

    vlaeu explain
    inside 在列表里面
    outside （默认）列表外
    inherit 继承父级元素的list-style-position的值

04usedStyle2.md