欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS样式、选择器、浮动、定位、盒子边框,理论知识

程序员文章站 2022-03-13 18:14:24
1.CSS:层叠样式表background-color;背景颜色font-size;文字大小font-family;字体类型color;字体颜色list-style:none;去小黑点text-decoration:none;去下划线text-alingn:center;居中或水平居中line-height:50px;垂直居中border-bottom:2px solid red;直线 为2px 红色list-style-imge:ur:(图片)cursor:pointer;鼠标进入有...

1.CSS:层叠样式表
background-color;背景颜色
font-size;文字大小
font-family;字体类型
color;字体颜色
list-style:none;去小黑点
text-decoration:none;去下划线
text-alingn:center;居中或水平居中
line-height:50px;垂直居中
border-bottom:2px solid red;直线 为2px 红色
list-style-imge:ur:(图片)
cursor:pointer;鼠标进入有小手 这个用于为类选择器hover中
CSS引入方式:
行内引入:


内部引入:head标签内
借助style
外部引入:
优先级:就近一致
2.选择器
基本选择器:
标签选择器、元属选择器 比如


类型选择器:class属性
比如

.点
ID选择器:id属性 比如

# 井
ID选这群>类选择器>标签选择器
后代选择器:
1. .box p{
选中所有的孩子
}
2. .box>p{
选中直接孩子
}









属性选择器:

<input type=“password” name=“uname” id="“value=”" />
input[type=‘text’]
为类选择器:
<a href=“百度链接” target="_blank"
a: link{}:超链接没有访问前默认状态
a: visitied{}:超链接已经访问后默认状态
a: hover:{} 当鼠标悬停的时候 显示的状态
a: active{}:鼠标按下时的状态
遵从爱恨原则 lovehate
选择器:hover常用
3.浮动:
浮动后一定不会挡住文字
可以让块级元素 在一排显示
块级元素:独占一行显示
行内元素:一行可以展示多个元素
使用浮动的元素 会脱离文档流
浮动既可以向左符 也可以向右浮
float:left;向左
float:right;向右
消除浮动的影响
overflow:hidden;
设置高度
在被影响的元素上 +样式 clear:both;
4.定位:
position:stati;:静态的
position:releative;相对的 相对本身原来的位置进行定位不会释放自己之前的位置top;上边的边距 left;左边的边距
position:absolute;绝对定位 会脱离文档流 相对已经定位的父元素进行定位,如果沿着继承关系 都没有发现定位的父元素 则 相对 body进行定位
top:上边的边距 left:左边的边距
position:fixed:固定定位
top:上边的边距 left:左边的边距
z-index; 值越大 代表距离用户越近
5.盒模型:
margin:外边距
padding:内边距
border:边框
content:内容
6.边框:
margin:0px auto;上下左右平分
border:1px solid red; 设置边框为1px的实线 颜色为红色
border-radius:50% 设置圆角 值越大 园越厉害
left:10px solid; 设置一边
7.快速生成法:
div.box>ul>li5>a[href=“连接”]>{内容}
一个div class名为box 下一个ul下五个li 下一个a标签加着连接
div.wenzi>ul>li
7>div>a>img[src=“img/ico$.jpg”]+p{重点旅客预选}
前面和上边一样+p就是前面基础上加一个p标签

本文地址:https://blog.csdn.net/weixin_45290168/article/details/107290423