目录
CSS基础性质
CSS盒子模型
边框(border)
Border-width(px)
Border-color
Border-style
边框的样式的属性值:
none无边框
hidden隐藏边框
dotted在某些平台为点线,其他为实线
dashed在某些平台为虚线,其他为实线
solid实线边框
double双线边框
groove根据颜色的值凸显3D凹槽效果
ridge根据颜色的值凸显菱边边框效果
inset根据颜色的值凸显3D凹边效果
outset根据颜色的值凸显3D凸边效果
复合写法:
border:1px solid red;没有顺序,还可以边框分开写
特殊(边框贴贴)
border-collapse属性控制浏览器绘制表格边框的方式。
border-collapse:collapse;
边框会影响盒子的大小。
内边距(padding)
padding属性用于设置内边距,即边框与内容之间的距离。
Padding-top/...(上下左右;上下,左右;上,左右,下;上右下左)
外边距(margin)
Marg-top/...
外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒子必须制定了宽度。
- 盒子左右的外边距都设置为auto。margin:0 auto;
直接给其父亲标签添加text-align:center;
外边距合并
嵌套块元素垂直外边距的塌陷.
会选择更多的margin进行移动。看起来就跟塌陷一样。
解决方案:
- 可以为父元素定义上边框。
- 可以为父元素定义内边框。
- 可以为父元素添加overflow:hidden;
清除内外边距
*{margin:0;padding:0;}
注意:
行内元素为了照顾兼容性,尽量只设置左右外边距,不要设置上下内外边距。
元素的显示与隐藏
Display
display:none(block);隐藏对象,不再占有原来的位置。
Visibility
visibility:visible;元素可视
visibility:hidden;隐藏起来但是位置保留!!!!!
Overflow
就是对于我们溢出部分的处理,是隐藏还是显示。
Overflow:visible,hidden,scroll(显示滚动条来隐藏),auto(需要的时候展示滚动条);----内容短,不展示滚动条,内容长,展示滚动条,可以拉动滚动条观看内容。
CSS元素显示模式
元素(标签)以什么方式进行显示。
两大元素
块元素
<h1><p><div><ul><ol><li>,其中<div>是最典型的块元素。
特点:
- 比较霸道,自己独占一行。
- 可设置宽度高度内外边距。
- 宽度默认父级100%。
- 是个容器,可以放任何元素。
注意事项:
文字元素不允许放块元素,比如<h1>,<p>,这些都是拿来放文本的。
行元素
<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等,<span>是最典型的行元素。行元素又可以叫内联元素。
特点:
- 相邻行内元素在一行上,一行可以显示多个。
- 高度,宽度设置无效。
- 默认宽度是内容本身的宽度。
- 行内元素只能容纳文本或者其他行内元素。
注意事项:
链接里面不能放链接!!特殊情况,<a>里面可以放块元素。
行内块元素
行内标签有几个特殊的标签<img/> <input/> <td>,他们同时具有行内元素和块元素的特点,有些资料称他们为行内块元素。
特点:
- 一行显示多个,和相邻的行内或行内块之间有空白间隙。
- 默认宽度是内容本身的宽度。
- 可以设置高度宽度内外边距。
CSS元素显示模式转换
一个模式的元素需要另外一种模式的特性。
例子:想要增加链接<a>的触发范围。
a{w200px,h200px;bc-color:pink;display:block;}
语法:
转为块元素:display:block;行内元素:display:inline;行内块:display:inline-block;
Tips:让行高等于格子的高度。
CSS的背景
背景图片
装饰性图片或者超大的logo可以用background-image属性描述。
Background-image(none|URL(地址))
背景平铺background-repeat属性。
属性值:
repeat,no-repeat,repeat-x,repeat-y;
特点:
默认的情况下,会把背景图片进行平铺。
背景图片会压着背景颜色。
背景颜色和图片可以同时设置。
背景位置background-position
属性值:
length:百分数,由浮点数和单位标识符组成的长度值。
特点:
x表示到左侧的距离,y表示到上侧的距离。
position:top,center,bottom,left,right方位名词。
(若只写了一个参数,另外一个参数,默认居中。)
单位可以混合!但是第一个一定是x坐标,第二个必然是y坐标。
语法:background-position: x y;
背景图像固定background-attachment
(背景附着)这个属性设置背景图片是否固定或者随着页面进行滚动。
属性值
Scroll随对象内容滚动
fixed背景图像固定
半透明背景
background:rgba(0,0,0,0.3);
0就是百分百透明,1就是不透明。
复合写法
body { background: black url(images/bg.jpg) no-repeat fixed center top; }
CSS基础选择器
基础选择器
标签选择器
p{ color: green; }
类选择器
·类名 {属性1: 属性值1}
<div class=’red’>变红色</div>
注意:
不要使用纯数字,中文命名,间隔可以用“-”代替。
类选择器-多类名
<div class=”red blue”>ou~</div>
ID选择器
#id { 属性1: 属性值1; 。。。 }
通配符选择器
* { margin:0; padding:0; }
复合选择器
后代选择器
.nav li { color: yellow; }
子选择器
.nav>a{ color: yellow; }
并集选择器
div,
p,
ol li { colo
伪类选择器
/* 未访问过的链接 */ a:link { color: black; text-decoration: none; }
/* 已经访问过的链接 */ a:visited { color: chartreuse; }
/* 鼠标经过链接 */ a:hover { color: blue; }
/* 鼠标按下链接但未弹起 */ a:active { color: red; }
顺序不能边,LVHA
focus伪类选择器
用于选取获得焦点的表单元素,焦点就是光标,一般情况下<input>表单才可获取,所以这个针对表单。
CSS字体属性
CSS Fonts属性
什么字体
font-family:‘宋体’;
font-family:‘微软雅黑’;
字体大小
font-size:20px(20像素的意思,px是单位)
字体粗细
font-weight:700;
文字样式
font-style:normal/italic,平常或者斜体。
CSS复合属性
font: italic 700 16px '微软雅黑';
CSS文本属性
文本颜色
color定义文本颜色
对齐文本
text-align:center;
装饰文本
text-decoration属性规定添加到文本的修饰。
- none.默认。没有装饰。
- underline.下划线
- overline.上划线
- line-throgh.删除线
-------------------------------------------------------------------------
文本缩进
text-indent:20px;
2em就是两个当前元素文字大小
行间距
line-height: 26px;
CSS三大属性
层叠性
Div{color:red}div{color:pink}
如果冲突,就近原则。会覆盖之前的。最后是粉色。
继承性
子标签会继承某些 父标签的属性。
font:12px/1.5 .这个1.5就是当前文字大小的1.5倍。
优先性
- 选择器相同,则执行层叠性。
- 选择器不同,根据选择器权重执行。
从小到大:
继承<元素选择器<类选择器<ID选择器<行内样式<!Important
越精确,优先级越高,但是父亲那里继承的只算在父亲那一层。.
例子:
#fa{
color:red!important;
}
p{
color:pink;
}
<div id=“father”>
<p>good</p>
</div>
//最后p是粉色,因为important的对象是父亲的。
权重叠加
Ul li{color:green}权重叠加:标签+标签。
CSS引入方式
内部样式表(嵌入式引用)
<style> div { color: red; } .becomered { color: red; } </style>
行内样式表
<div style="color: red; font-size: 12px;"> 青春不常在 </div>
外部样式表
<link rel="stylesheet" href="css文件路径">
关于HTML的一些知识总结在这篇文章:前端HTML等学习笔记,复习,以及自己的理解_minmin66666的博客-CSDN博客