css样式03

边框

元素:border-width,border-color,border-style(solid,dotted,dash)//border: 2px solid red
border-bottom: none//1px red solid
border-radius: 50px(只要是大于等于正方形的一半就是圆形)
应用:做一个三角形

padding

值可以是数值也可以是百分比(相对于父容器,不是自身)
一般不给元素设置高度
四个方向的值:上右下左
三个方向的值:上右(左)下
两个方向的值:上下、左右

margin

  • 有四个方向的值,可以合写,值可以是数值也可以是百分比(相对于父容器不是自身),还可以是负值
  • 外边距合并问题
  • 居中 margin:0 auto;(0不0无所谓,只要左右是auto就行,前提是不能有浮动定位,并且块状元素有固定宽度)

display

行内:inline,inline-block,inline-table
行内元素上下margin和padding不生效,当然背景色可能会撑开
块级: block,table,list-item
不继承: 边框,margin,padding

font

font-size,font-weight(默认值:regular,粗体:bold),lline-weight(行高:百分比、倍数、固定尺寸)
font-family(从前往后解析,不是想设什么就设什么,要看系统)在css中设置字体的时候,直接写中文或者英文名称,浏览器都能识别,如果外国人打开其是英文,国内打开是中文。css保存时是gbk,但用户打开时是utf-8浏览器解析,则会乱码,保险是将字体用unicode表示。在控制台中:escape('黑体')把%u换成\。chrome最小字体12px(浏览器—设置),默认16px
继承: 都能继承给子元素

text

text-align:用在块元素上对里面的行内元素生效。left,center,right,justify(两端对齐)
text-indent:第一行缩进的距离
text-decoration:none/underline/line-through/overline
color: 文字颜色
text-transform:改变文字大小写。none/uppercase/lowercase/capitalize
word-spacing:改变字(单词)之间的标准距离
letter-spacing:字母间隔(修改的是字符或字母之间的间隔)

颜色

单词: red/green
十六进制:#fff
rgba
应用:给a链接设置颜色,a有默认的颜色和样式会覆盖继承的样式,所以单独给a链接设置颜色常用的是a{color:red;text-decoration:none}

列表去点

ul{list-style: none}或者li{list-style:none}

inline-block

既呈现inline的特性(不占据一整行,宽度由内容的宽度决定)又呈现block的特性(可设置宽高,内外边距)

background

-attachment:背景图像是否固定或者随着页面的其他部分滚动。
-color:元素的背景颜色
-image:把图像设置为背景
-position:背景图像的起始位置(默认左上角)
-repeat:背景图像如何重复以及是否重复(no-repeat/repeat-x/repeat-y/repeat)
-size:背景的大小,不是设置窗口的大小而是设置背景图片的大小
contain:让窗口刚好放下背景图片,背景图片等比缩放。
cover:背景图片多的截下。
背景色和背景图片同时使用:背景图片透明则背景色透过来;背景图片不透明但很小,则未被覆盖的地方为背景色。
背景图片必须有窗口欧,也就是必须有宽高。

隐藏元素

opacity: 0(透明度为0,范围0-1,全部透明,包括子元素,占位置)
visibility:hidden(和opacity:0类似,占位置)
display:none(消失,不占位置)
background-color:rgba(0,0,0,0.2)只是背景色透明。

你可能感兴趣的:(css样式03)