CSS颜色及文本字体
CSS颜色表示法
-
颜色名表示，比如：red 红色，yellow黄色，pick粉色
-
16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
-
RGB颜色: 红(R)、绿(G)、蓝(B)三个颜色通道的变化 background-color: rgb(200,100,0);
-
RGBA颜色: 红(R)、绿(G)、蓝(B)、透明度(A) background-color: rgba(0,0,0,0.5);
16进制： 0-9 a-f
rgb的值：0-255
CSS文本设置
常用的应用文本的css样式：
color 设置文字的颜色
font-size 设置文字的大小
font-family 设置文字的字体
font-style 设置字体是否倾斜
line-height 设置文字的行高
text-decoration 设置文字的下划线
text-indent 设置文字首行缩进
text-align 设置文字水平对齐方式
color:red;
font-size:12px;
font-family:'微软雅黑';
font-style:'normal'; 设置不倾斜
font-style:'italic';设置文字倾斜
font-weight:bold; 设置加粗
font-weight:normal 设置不加粗
line-height:24px;
text-decoration:none; 将文字下划线去掉
text-indent:24px; 设置文字首行缩进24px
text-align:center 设置文字水平居中
CSS边框属性
- border:宽度 样式 颜色;
border: 1px solid red;
样式：solid实线，dotted点状线，dashed虚线
- 属性的顺序可以自由改变
border: red 1px solid;
- 可以单独设置一项属性或一条边
border-top-color: red;
- border-radius：圆角处理
- 只给一个属性值默认设置四个角
- 给两个值设置对角，第一个设置左上和右下，第二个设置右上和左下
- 给四个属性值按照顺时针方法设置四个角，从左上开始。
border-radius: 30px;
border-radius: 20px 40px;
border-radius: 10px 20px 30 px 40px;
- box-shadow: 阴影设置
- 第一个值：设置水平方向位移 正直往右偏移 负值往左偏移
- 第二个值：设置垂直方向位移 正直向下 负值向上
- 第三个值：设置模糊程度
- 第四个值：设置扩散范围
- 第五个值：设置阴影颜色
- 第六个值：设置是否为内阴影 如果为内阴影就设置insert如果不设置内阴影可以不写
box-shadow:-10px -20px 30px 40px red inset
背景属性
-
background-color: 背景颜色
background-color:red;
background:green -
background-image: 背景图片
bckground-image:url(.example.jpg);
background:url(./example.jpg); -
background-repeat：是否重复，如何重复?(平铺)
background-repeat:no-repeat;
-
background-position：定位
- 第一个值：水平方向
- 第二个值：垂直方向
background-position:10px -20px;
-
background-size: 背景大小
- 第一个值：宽度
- 第二个值：高度
background-size:100px 50px;
元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:hidden;
overflow:scroll;
overflow:auto;