网页设计css样式代码大全 网页制作基本代码
CSS基本样式和盒子模型基础1.CSS样式表的引用方法1.1、外部文件引用方法& lt链接Rrel = & # 8221样式表”href = & # 8221mystyle.css & # 8221& gt1.2，用@import引用外
CSS基本样式和盒子模型基础
1.CSS样式表的引用方法
1.1、外部文件引用方法
& lt链接Rrel = & # 8221样式表”href = & # 8221mystyle.css & # 8221& gt
1.2，用@import引用外部CSS文件。
@导入URL(my style . CSS)；
1.3.内部文档标题模式
1.4.内联样式
2选择器
2.1基本选择器
标签/。class/#id/*通配符
2.2属性选择器
[名称]匹配所有具有属性名称的元素。
[name = ’测试’]元素与属性名name=test匹配
[name ~ = ’测试’]属性包含独立的单词值。
在[attribute*=value]属性中做字符串拆分，只要是word值就可以拆出；
[name | = ’测试’]属性必须是完整且唯一的单词，或者以–分开的
【name^=’测试’属性的前几个字母是值。
[属性$ =值]以值结尾。
2.3复合选择器:
后代(空)
子选择器(>: )
兄弟选择器(~):选择以下所有兄弟元素。sub ~p p。
邻居选择器(+):选择到下一个元素。sub +p p。
交叉点选择器(。方框#atr)
联合选择器(。方框，#atr)
2.4伪元素选择器(两个冒号)
*以前
*之后
*选择
首字母(仅用于块级元素，首字母)
*第一行(只能用于块级元素，第一行)
2.5伪类(冒号)
:链接
:已访问
:悬停
:活动
3.样式优先级
3.1选择器重量
内嵌样式1，0，0，0
id 0，1，0，0
类，伪类，属性0，0，1，0
标签，伪元素0，0，0，1
通配符，选择器0，0，0，0
3.2 !重要的
3.3邻近原则(风格层叠)
4。基本样式
4.1字体
字体:样式、变体、粗细、大小/行高、系列
字体系列
字体大小:偶数
字体样式:unset/normal/inherit/initial；
字体变体:小型大写小写字母大写状态
font-weight:number(1-100)
/bold/normal/bloder/light；
4.2文本
颜色:颜色——#ffffff，rgb(255，255，255)，关键字(红色)，rgba()
水平对齐:text-align:justify
/center/left/right/start/end；
垂直对齐
:垂直对齐:居中/文本顶部/文本底部；
装饰线
:文本-装饰:无/下划线/线通/轮廓；
方向:RTL ltr；
缩进:文本缩进:2em
文本转换
:文本转换:大写/小写/大写；
行:行高:1.5em(适用于单行数据)
Wrap:空白:nowrap断字:全断；
文本溢出:省略号；
–示例:单行文本换行处理–
–空白:nowrap
–文本溢出:省略号；
–溢出:隐藏；
单词间距:单词间距；
字符间距:字母间距；
4.3背景
背景色:；
背景-图像:URL()；
背景-重复:重复；不重复；重复-x；重复-y；
背景-位置:方向px方向px；(左/右/上/下只写一个参数时，默认值是居中；默认位置的左上角)
背景-附件:固定；loacl滚动；
背景-尺寸:封面；包含；100% 100%;
5。箱式模型
5.1。元素分类
区块标签区块:专属线，可设定所有样式。
inline block标签inline-block:可以设置没有专属线的样式；
*–鬼影间距:不过中间断行会处理，完全贴不进去。
* –解决方法:将标签放在一行；父元素设置字体大小:0；
内嵌标签inline:一行不独占，有些样式不能设置。
5.2。元素类型转换显示
display:inline-block | inline | block | flex | inline-flex |表格单元格| none
5.3。箱式模型
5.3.1构成
内容:内容
填充:内边距
边框:边框
边距:外部边距
框大小=内容+填充+边框
5.3.2计算方法
宽度:框的设定宽度。
盒子尺寸
*content-box:标准盒模型，默认值，width = content-width；
*border-box:怪异(IE)框模型宽度=内容宽度+填充宽度+边框宽度；
padding-box:width =内容+填充；
框大小:边框-框；//自动改变内容的宽度以适应设定的宽度
内容框；//默认值
5.4 .填充
右上，左下；
上、下、左、右；
5.5 .毛利
重叠现象(外边距合并):边距为最大值。
塌陷现象:当父元素和子元素都是块级元素时；如果为第一个(最后一个)设置了margin-top(bottom ),父级将在相应的方向折叠；
外部边缘塌陷的示例:
& ltdiv class = & # 8221框”& gt
& ltdiv class = & # 8221方框1 ″& gtbox1 & lt/div >
& lt/div >
。box & gt. box1{
宽度:200px
高度:200px
背景色:蓝绿色；
边距-顶部:100px
}
。方框{
宽度:400px
高度:400px
背景色:蓟；
}
