当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS简述1

CSS简述1

2020年07月12日  | 移动技术网IT编程  | 我要评论

CSS

Cascading Style Sheet：层叠样式表，简称样式表。

一、字体设置：

  • font-style:设置字体是否倾斜 normal italic
  • font-weight:设置字体是否加粗
    （normal bold bolder 100 200 300）
  • font-size: 设置字体大小
    （可以非常大 不能非常小 最小是12px）
  • font-family: 设置字体类型
    （font-family:A,B,C,D）
  • font:上面的几个属性的复合属性
    （font:font-style font-weight font-size/line-height font-family
    font-style font-weight 可以不写 也可以交换位置
    font-size/line-height font-family 必须写 能交换位置 ）
  • color:设置字体颜色
    （对于a标签来说，需要选中a标签 ）

二、文本设置：

text-decoration: 用来设置文本的装饰线  下划线（underline） 删除线（line-through）  
        应用：把a标签的默认的下划线去掉   hover时，加上下划线
text-indent: 首行缩进   
	2em 首行缩进两个汉字的宽度
    -1000em   可以隐藏一个盒子中的文本    如：<div class="logo">百度</div> （显示logo图片，隐藏“百度”两个字）
    
text-align: 1）让盒子中的文本居中  
				2）让行内元素或行内块元素在一个盒子中居中（可以把行内元素或行内块元素当成文本）
line-height:设置行高 
    1）如果是子标签是男标签，行高可以撑起子标签的高度
    2）如果是子标签是女标签，行高不能撑起子标签的高度

三、盒子模型

  1. 内容区域 width height
  2. 内填充区域 padding
  3. 边框 border
  4. 外填充区域 margin
  5. 背景 background
1）内容区域：width 和 height
    对于男盒子来说，表示内容区域 
    对于女盒子，width和height不起作用 

    注意点：
    1）不设置有默认值，宽度默认值是auto，对于块级元素来说，auto表示尽可能大，对于行内元素来说，auto表示尽可能小。
    2）不设置高度，男盒子的高度是内容的高度，也就是说高度是由内容撑起来的，对于女盒子来说，也是由内容撑起来的，但是和font-size也有关系。
    3）宽度和高度可以设置百分比，是父元素的百分比的，一般情况下在移动端开发时用的多一点。
2） 内填充区域： padding
    用来设置内填充，也叫补白  表示内容区域和边框之间的距离 

    四个方向： 用的也比较多的
        padding-top: 
        padding-right:
        padding-bottom:
        padding-left:
    
    padding后面也可以跟一个值，二个值，三个值，四个值：
        一个值：padding:10px  四个方向的padding都是10px
        二个值：padding:10px 20px;   上下是10px  左右是20px
        三个值：padding:10px 20px 30px;   上是10px  左右是20px  下是30px
        四个值：padding:10px 20px 30px 40px;   上 右 下 左
    
    注意点：
    1）有些标签是有默认的padding  如ul  ol... 等  一刀切  *{ padding:0; }
    2）对于行内元素来说，padding在垂直方向上不影响行高，效果上看似是有padding，但是padding不是真正的padding，或者说对于一个女盒子来说，padding在垂直方向上无效。
    3）对于块级元素来说，上下padding可以撑起男盒子的高度。
3）边框： border
    边框的粗细  border-widht 
    边框的样式  border-style 
    边框的颜色  border-color 
       一般情况下，不会单独设置  border是一个复合属性
    注意点：
    1）border:1px solid red;  border后面的属性是没有顺序的，但是一般都是先写border-width,然后是border-style，最后是border-color。
    2）粗细大部分情况下单位都是px  你也可以使用单词  使用单词时  在不同的浏览器下代表粗细是不一样的
    3）边框的样式也非常多 用的非常多的有这几个：solid 实线   dotted 点画线  dashed 虚线  none 没有线  ..... 
    4）边框的颜色设置  单词  用的最多还是16进制  也可以使用rgb函数
    5）也可以单独设置某一个方向上的border  border-top:1px solid red; 用的也比较多
4）外填充区域：margin
    表示外边距  盒子与盒子之间的距离  是边框之外的间隔  是在border之外的 
    四有个方向：
        margin-top 
        margin-right 
        margin-bottom 
        margin-left  
    margin后面也可以跟一个值，二个值，三个值，四个值：
        一个值：margin:10px  四个方向的margin都是10px
        二个值：margin:10px 20px;   上下是10px  左右是20px
        三个值：margin:10px 20px 30px;   上是10px  左右是20px  下是30px
        四个值：margin:10px 20px 30px 40px;   上 右 下 左
5）背景：background
background-color:设置盒子的背景颜色  背景颜色可以填充padding  也可以填充border
background-image:设置盒子的背景图片  img标签也是盒子  也可以给img这个盒子设置背景图片
    一个盒子大小正好和背景图大小一样：正好装进去 
    一个盒子如果大于背景图：默认会在x和y轴都进行平铺 
    一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐  左上角是指从pddding开始  但是border中也会填充图片图片
background-repeat: 
    控制是否平铺　　repeat-x  只平铺x轴    repeat-y  只平铺y轴   repeat x和y轴都平铺   no-repeat x和y轴都不平铺
background-position:
    一个小盒子中放一个大的背景图，可以使用background-position定位。
    一个大盒子中放一个小的背景图，也可以使用background-position定位。

本文地址：https://blog.csdn.net/weixin_46003469/article/details/107264792

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网