全栈ace-css标签1

一、CSS在哪写

1.标签内的style属性

2.html的<style></style>标签内

3..css文件内

二、CSS语法格式

1.CSS语法

CSS由特征和值成对出现 <div style="特征：值；特征：值；"></div>

<style></style>或.css文件中<link rel="默认" href="路径" >在head标签内部

div {

        特征：值；

        特征：值；

}

2.CSS选择器

        通过标签名，#id名，.class名

3.其他选择器

        *{}

        (1)对选择的class名定样式(即父节点)border-width,border-color,bord-style .class名{}

        (2.1)对选择的class的子节点定样式 .class名 div{}对class名下所有div标签定样式改，重叠会加粗.

        (2.2).class名>div{}对紧挨class名下只一级的div标签样式改

        (3)对选的class名标签之后(不含text3)兄弟标签改样式.class名~.text4（.class名或.class名~div）

4.伪类选择器

        已选好的标签或class名等，之后加上:hover{}鼠标经过时显示的样式

        同上:active{}鼠标点击时显示的样式

        同上：visited{}已访问的链接，只针对a标签        a是行级标签，暂时无法设置背景色

三、CSS优先级

        style属性里>id>class>标签

        同一级别选择器后写优先

四、常用样式

1.盒子模型

       1.1 标签元素排列规则：从左往右，从上往下

        1.2内部大小-内边距-边框-外边距

        1.3两个盒子水平放的外边距不能重合，垂直方的外边距重合成一个

        1.4div的

        margin：10px；

        (float：left；)

2.盒子样式

        2.1.border边框(border/border-top/border-bottom/border-left/border-right:)

                border:1px solid red;(width:100px;height:100px;)粗细，线条，颜色(三个属性都要设置)

        2.2.margin外边距(margin/margin-top/margin-bottom/margin-left/margin-right)

                margin:1px,3px,2px,4px;上右下左、(上下，左右)

        2.3padding内边距(同margin)

                同margin

        2.4width

        2.5height

        *设置居中

                左右外边距设成auto，设置宽，最好设高(不设会占满一行)

                div{margin:100px auto;width:100px;}

3.文本样式

        font/font-family/font-size/font-weight/font-align/line-height/text-decoration

        line-height:为div的height/div的font-size数字时，文字垂直居中

        或line-height=div的height的px时，文字垂直居中

4.背景样式

        background:背景色，背景图片，图片坐标，背景尺寸，图片重复方式

        background-color

        background-image:url("图片地址")；

        background-position

        background-size

        background-repeat

5.图片样式

6.布局样式