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

CSS基础样式与盒模型基础

1、CSS样式表的引用方式

1.1、外部文件引用方式

<link Rrel=”stylesheet” href=”mystyle.css”>

1.2、使用@import引用外部CSS文件

@import url(mystyle.css);

1.3、内部文档头方式

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

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

​ :active

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 !important

3.3 就近原则(样式的层叠性)

4、基础样式

4.1字体

font:style,variant,weight,size/line-height,family

font-family

font-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.元素类型转换display

display:inline-block|inline|block|flex|inline-flex|table-cell|none;

5.3.盒模型

5.3.1组成

content:内容

padding:内边距

border:边框

margin:外边距

盒模型大小=content+padding+border

5.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;

}

给TA打赏
共{{data.count}}人
人已打赏
未分类

5分钟的发言稿需要多少字(5分钟汇报多少字合适)

2022-9-13 9:52:55

未分类

wps怎么添加字体包库?没想到这么简单

2022-9-13 9:56:59

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索