JavaWeb前端开发知识总结(CSS)

àì夳堔傛蜴生んèń 2022-06-16 06:12 267阅读 0赞

# JavaWeb前端开发知识总结(CSS) #

*  JavaWeb前端开发知识总结CSS
    
     *  CSS技术
        
         *  1 CSS概述
            
             *  CSS规范
         *  2 CSS选择器
         *  3 CSS常用属性

## 1. CSS技术 ##

### 1.1 CSS概述 ###

*  **CSS** 指层叠样式表 (\*C\*ascading \*S\*tyle \*S\*heets) .

#### CSS规范 ####

引入方式：
        1.<标签 style="css属性1：属性值1;css属性2：值1 值2;..." >内容体</标签>
        2.<style> 选择器 { css代码 } </style>
        3.<link rel="stylesheet" href="相对路径css文件" /> /*使用外部的css文件*/
    注意事项:  
        1.引入外部CSS样式时,使用<link rel="stylesheet" href="css/style.css" />,其中的rel属性不能省略;
        2.div布局时使用float属性进行div的浮动排列,当一行布局结束后使用clear属性进行浮动布局的清除.
    优先级:行内样式>页面样式>外部样式.

### 1.2 CSS选择器 ###

元素选择器:
        标签名称{ css代码 }
    id选择器:
         #id属性值{ css代码 }
    类选择器:
        .class属性值{ css代码 }
    并列选择器:
        选择器1,选择器2{ css代码 }
    后代选择器:
        选择器1 选择器2{ css代码 }  /*选择器1里面所有选择器2*/
    子元素选择器:
        选择器1 > 选择器2{ css代码 }  /*选择器1里面的第一层选择器2所代表的元素*/

### 1.3 CSS常用属性 ###

字体:
        大小:font-size:数字px;
        颜色:color
        字体:font-family,字体的类型
        字体粗细:font-weight:数字
    对齐方式:对于文本的对齐方式,text-align:center/right/left
    布局(浮动属性)float:针对块级元素(div,table)有效,使用display:inline-black,可以将行内元素转换为块元素
        float的值--left:向左浮动,使用-- float:left
        float的值--right:向右浮动,使用-- float:right
    清除浮动clear:both/left/right,可以是<br clear="all" />进行清除浮动
    width/height:宽度高度,只针对块级元素有效.

**盒子模型:**

![CSS盒子模型][CSS]

边框border:宽度 颜色 样式;
        border:1px solid red;
        border-bottom:1px solid red;
    margin:外边距
        描述:边框距离外部的
        margin: 10px; /*设置四边外边距*/
        margin:10px 5px; /*上下是10px,左右5px*/
        margin-left:5px; /*设置左外边距*/
        对于div居中:margin:0 auto;等价于margin-left:auto;margin-right:auto;
    padding:内边距
        padding:10px;  /*设置四周内边距*/
        padding:10px 5px; /*上下内边距10px  左右内边距5px*/
        padding-left:5px;

[CSS]: /images/20220616/cf7b02a2f0394585a6064a9b0e17fd9b.png