CSS属性(一)

主要介绍五类:文本,盒模型,背景,浮动,定位。

一:文本

1.字体

font: 在一个声明中设置所有字体属性

  • font-family: 规定文本的字体系列
  • font-size: 规定文本的字体尺寸
  • font-style: 规定文本的字体样式。倾斜:italic(有自动倾斜的字体会用这个字体,没有的话,原文字倾斜),oblique,正常:normal
    font-variant: 规定文本的字体样式
  • font-weight: 规定字体的粗细。有bold(数值700),normal(数值400)。或者其他数值
    @font-face: 一个规则,允许网站下载并使用其他超过"Web- safe"字体的字体
    font-size-adjust: 为元素规定 aspect 值
    font-stretch: 收缩或拉伸当前的字体系列

2.颜色

color:设置文本的颜色

  • 1.颜色名:red,yellow,blue等
  • 2.十六进制:黑色:#000000,白色:#ffffff等
  • 3.RGB:黑色:rgb(0,0,0),白色rgb(255,255,255)。RGBA,带透明度的色值,0~1,默认为1。rgb(0,0,0,0.5)

3.格式

direction | 规定文本的方向 / 书写方向
letter-spacing | 设置字符间距

  • line-height | 设置行高。值是像素(px),或者百分比:50%,是相对字体大小来说的
  • text-align | 规定文本的水平对齐方式。left,right,center
  • text-decoration | 规定添加到文本的装饰效果。none,underline下划线,line-through中划线,overline上划线。a标签默认为underline,其他文本默认为none
  • text-indent | 规定文本块首行的缩进。值是像素(px);百分比:50%,是相对父级宽度来说的;字符例如:2em两个中文字符宽度

text-transform | 控制文本的大小写
unicode-bidi
vertical-align | 设置元素的垂直对齐方式
white-space | 设置怎样给一元素控件留白
word-spacing | 设置单词间距
hanging-punctuation | 指定一个标点符号是否可能超出行框
punctuation-trim | 指定一个标点符号是否要去掉
text-align-last | 当 text-align 设置为 justify 时,最后一行的对齐方式。
text-justify | 当 text-align 设置为 justify 时指定分散对齐的方式。
text-outline | 设置文字的轮廓。
text-overflow | 指定当文本溢出包含的元素,应该发生什么
text-shadow | 为文本添加阴影
text-wrap | 指定文本换行规则
word-break | 指定非CJK文字的断行规则
word-wrap | 设置浏览器是否对过长的单词进行换行。


    

效果图

二:盒模型

主要包括:宽,高,内边框,边框,外边距。单位为px

盒模型

:width
:height。可以不设置,有内部元素决定其高度
内边距:padding。复合属性,包含上下左右。也可以单独设置,
例如:padding-top,padding-bottom,padding-left,padding-right。
padding:10px 20px 30px 40px;与iOS不同的是,顺序为上右下左
padding:10px 20px 40px;三个值时,为上,左右,下
padding:10px 20px;二个值时,为上下,左右
padding:10px;1个值时,为上右下左相同
边框:border。复合属性:border-width,border-style和border-color。
border: 1px solid gray
border-width | 指定边框的宽度。同上,也是复合属性,包含上下左右。border-top-width,border-bottom-width,border-left-width,border-right-width。也可以同时设置4,3,2,1个值,或者单独设置某个边。
border-color | 指定边框的颜色。同上,也是复合属性。
border-style | 指定边框的样式。同上,也是复合属性。具体的值有:点状dotted,实线solid,双线double,虚线dashed等,更多可以查看资料。

div {
      /*同时设置四边的复合属性width,style,color*/
      border: 1px solid gray;
      /*设置某边的复合属性width,style,color*/
      border-left:  2px dashed pink;

      /*设置某属性的四边*/
      border-width: 10px 20px 30px 40px;
      border-color: red yellow blue purple;
      border-style: solid double dotted dashed;

      /*单独设置某边单一属性*/
      border-top-width: 20px;
      border-top-style: dotted;
      border-top-color: red;
}

应用:
1.三角形:

.arrow {
    margin: 100px;
    width: 0px;
    height: 0px;

    /*background-color: gray;*/
    border:40px solid white;
    border-top-color: red;
}
2.表格边框合并
  属性为border-collapse:边框合并,默认值为separate,分开的,改为collapse,即可`border-collapse: collapse;`

外边距:margin。复合属性。同padding,也有上右下左四个边。可以单设,也可以同时设置。
盒子水平居中:左右值设为auto即可。例如:border:10px 20px 30px;

效果图

补充

  1. 盒子高度可以不设置(或者auto),而是由内容来决定

  2. 当盒子限定了高度后,内容溢出,可以设置overflow:hidden;

  3. 宽度剩余:只设置左边距,不设置右边距(设置为0)。同理还有高度剩余

  4. margin塌陷(竖直方向)

    • 同级:上下两盒子都有margin值时,其相邻两个margin值会取其中的大值,而不是和值。
    • 盒子嵌套:也会塌陷。并不是相对其父级盒子。
      对于这种情况,同级之间一般只设置其中一个盒子的一个边,另一个设置为0。嵌套关系呢,一般有两种:1.给父级加一个边框border,限定父盒子区域。2.父盒子设置padding,而不是子盒子用margin-top。
      5.居中:
  5. 居中:

    1. 文本居中:
      • 水平方向:text-align: center;
      • 竖直方向:
        1. 单行文本,直接设置行高等于盒子高度。
        2. 多行文本,高度自适应,设置其上下padding相等即可
    2. 盒子居中:
      • 水平方向:margin左右边设置为auto即可
      • 竖直方向:高度自适应,设置其上下padding相等即可

你可能感兴趣的:(CSS属性(一))