前端03

Posted 2021-11-25 linchengcheng

css：层叠样式表

　　设置标签样式

css注释

　　/*这里是注释*/

语法结构

　　选择器 { 属性:样式;属性:样式;}

引入css样式的方式

　　1 在head内style标签内直接写css

　　2 在head内link标签引入外部css样式

　　3 在标签内直接写style属性来设置样式

通常标签应该有的属性

　　id，name，任何标签都可以自定义属性

　　class类属性，可以有多个

查找标签

基本选择器
元素选择器
p {color:red;}

ID选择器
#i1 {background-color:red;}

类选择器
.c1 { font-size: 12px;}

通用选择器
* { color:white;}

组合选择器
后代选择器
li内部的a标签设置字体颜色
li a {color:green;}

儿子选择器
选择所有父级是div标签的p标签
div>p {font-size:12px;}

毗邻选择器
选择紧跟着div标签之后的p标签
div+p {margin:5px;}

弟弟选择器
li后面所有的p标签
#i1~p {border:2px solid royalblue;}

属性选择器
用于选取带有指定的元素
p[title] {color:red;}
用于选取带有指定属性和值的元素
p[title="123"] {color:green;}

分组
div,
p {color:red;}

嵌套
.c1 p {color:red;}

伪类选择器
a:link
a:visited
a:hover
a:active
input:focus

伪元素选择器
first-letter
before
after

选择器的优先级

　　内联样式>id选择器>类选择器>元素选择器

css属性相关

width：属性可以为元素设置宽度

height：属性可以为元素设置高度

块级标签才能设置宽度，行内标签的宽高由内容决定

文字字体
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;

文字大小
font-size:12px;

文字颜色
color
1 通过十六进制指定
2 通过RGB指定
3 通过RGBA指定
4 通过颜色名称

文字粗细
font-weight
normal 默认
bold 粗体
bolder 更粗

文字对齐
text-align
left 左对齐 是默认值
right 右对齐
center 居中对齐
justify 两端对齐

文字装饰
text-decoration
none 默认
underline 定义下方一条线
overline 定义上方一条线
lline-through 定义穿过文本的一条线

段落缩进
text-indent

背景属性

背景颜色
background-color:red;

背景图片
background-image:url("图片地址");

背景重复
background-repeat:no-repeat;
repeat：默认背景图片铺满网页
repeat-x：背景图片只在水平方向上平铺
repeat-y:背景图片只在垂直方向上平铺
no-repeat：背景不平铺

背景位置
background-position：left top;

简写方式
background: #336699 url("1.png") no-repeat left top;

边框

边框属性
border-width   边框粗细
border-style    线样式
border-color    边框颜色

简写方式
border:2px solid red;

边框样式
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框

设置圆角边
border-radius

display属性

　　none：html文档中元素存在，但不在浏览器中显示。一般配合javascript代码使用

　　block：默认占满整个页面宽度

　　inline：按行内元素显示

　　inline-block：使元素同时具备行内元素和块级元素的特点

css盒子模型

　　margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的

　　padding：用于控制内容与边框之间的距离

　　border：围绕在内边距和内容外的边框

　　content：盒子的内容显示文本和图像

margin属性
margin-top    上
margin-left    左
margin-right  右
margin-bottom 下

简写
margin:5px 10px 15px 20px;
顺序：上右下左

margin:10px 20px;
第一个是上下，第二个是左右

常见居中
margin:0 auto;

padding属性
padding-top
padding-right
padding-left
padding-bottom
与margin类似，但是没有居中