网页设计css样式代码大全_网页制作基本代码

网页设计css样式代码大全_网页制作基本代码 CSS基础样式与盒模型基础1、CSS样式表的引用方式1.1、外部文件引用方式<link Rrel=”stylesheet” href=”mystyle.css”>1.2、使用@import引用外部CSS文件@import url(mystyle.css);1.3、内部文档头方式1.4、行内样式<table style=”color:red;font-size:10pt” />2选择器2.1基本选择器标签/.class/#id/*通配符2.2属性选择器​ [name]匹配到所有属性名为name的元素​ [name=’test’]匹配到属性名name=test的元素​ [name~=’test’]属性中包含独立的单词为 value​ [attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行;​ [name|=’test’]属性中必须是完整且唯一的单词，或者以 – 分隔开​ [name^=’test’]属性的前几个字母是 value 就可以​ [attribute$=value] 以value结尾2.3复合选择器：​ 后代选择器（空格）​ 子代选择器（>）​ 兄弟选择器（~）：选择下面的所有兄弟元素 .sub ~p​ 相邻兄弟选择器（+）：选择到紧挨着一个元素 .sub +p​ 交集选择器（.box#atr)​ 并集选择器(.box,#atr)2.4伪元素选择器(两个冒号)​ ::before​ ::after​ ::selection​ ::first-letter（只用于块级元素，首字母）​ ::first-line（只能用于块级元素，首行）2.5伪类(一个冒号)​ :link​ :visited​ :hover​ :active3、样式优先级3.1 选择器权重​ 内联样式 1,0,0,0​ id 0,1,0,0​ 类、伪类、属性 0,0,1,0​ 标签、伪元素 0,0,0,1​ 通配符、选择符 0,0,0,03.2 !important3.3 就近原则（样式的层叠性）4、基础样式4.1字体font:style,variant,weight,size/line-height,familyfont-familyfont-size:偶数font-style:unset/normal/inherit/initial;font-variant:small-caps小型字母大写状态font-weight:数字（1-100）/bold/normal/bloder/lighter;4.2文本颜色:color——#ffffff,rgb(255,255,255),关键字(red),rgba()水平对齐:text-align:justify(两端对齐)/center/left/right/start/end;垂直对齐:vertical-align:middle/text-top/text-bottom;修饰线:text-decoration:none/underline/line-through/overline;方向direction:ltr,rtl;缩进:text-indent:2em;文本转换:text-transform:uppercase/lowercase/capitalize;行高:line-height:1.5em;(适用于单行数据)换行:white-space:nowrap; word-break:break-all;text-overflow:ellipsis;–例子：单行文本换行处理––white-space: nowrap;–text-overflow: ellipsis;–overflow: hidden;字间距:word-spacing;字符间距:letter-spacing;4.3背景background-color:;background-image:url();background-repeat:repeat;no-repeat;repeat-x;repeat-y;background-position:direction px direction px;(left/right/top/bottom只写一个参数时,默认为center;默认位置左上)background-attachment:fixed;loacl;scroll;background-size:cover;contain;100% 100%;5、盒模型5.1.元素分类块级标签block：独占一行，可以设置所有样式行内块标签inline-block：不独占一行，可以设置样式;*–幽灵间距：但是会把中间的换行进行处理，无法完全贴合。

​*–解决：标签放在一行；父级元素设置font-size:0;行内标签inline：不独占一行，部分样式无法设置5.2.元素类型转换displaydisplay:inline-block|inline|block|flex|inline-flex|table-cell|none;5.3.盒模型5.3.1组成content：内容padding：内边距border：边框margin：外边距盒模型大小=content+padding+border5.3.2计算方式width:设置的盒子宽度box-sizing*content-box :标准盒模型,默认值，width = content-width;*border-box:怪异(IE)盒模型 width = content-width + padding-width + border-width;padding-box:width=content+padding;box-sizing:border-box;//自动改变content的宽度来适应设置的width宽度content-box;//默认值5.4.padding上 右 下 左；上 左右 下；5.5.margin叠压现象（外边距合并）：边距采用最大值。

塌陷现象：当父级和子级元素都是块级元素；给第一个（最后一个）设置了margin-top(bottom),父级会向相应的方向塌陷;外边距塌陷例子：<div class=”box”><div class=”box1″>box1</div></div>.box>.box1{width: 200px;height: 200px;background-color: teal;margin-top: 100px;}.box{width: 400px;height: 400px;background-color: thistle;}