标签:margin 设置 字号 问题 代码 外部 idt repeat 布局
CSS学习框架如下:
引入CSS的三个方式
选择器的用法
常用属性
布局和盒子模型
定位
一.引入方式
外部引入
使用<link>标签
在外部建立*.css文件
<link rel="stylesheet" type="text/css" href="css/style.css文件路径">
内部引入
<style>在此引入</style>
内联样式
示例<p style="color:pink;"></p>
对于任意标签,一共有四种样式,除了以上三种外,还有浏览器默认样式,可修改。
二.选择器
ID选择器
<style>#p1{添加样式}</style>
<p id="p1"></p>
标签选择器
p{}
类选择器
<style>.p1{添加样式}</style>
<p class="p1"></p>
包含选择器
.p span{}在p类中的span标签的样式
并列选择器
.p,span{}p类和span标签共同拥有的样式
伪选择器
a:hover{}鼠标浮动效果
a:link{}未访问时的效果
a:visited{}访问后
a:active{}正在被访问
三.常用属性
文本属性
color:red;文字颜色
letter-spacing:10px;汉字间距
word-spacing:10px;单词间距
text-align:center;字居中
text-indent:4px;首行缩进
line-height:10px;行号,当与高一致时,常常用于垂直居中
text-decoration:none;underline;划线
字体属性
font-family:楷体;字体
font-size:100px;字号
font-style:italic;斜体
font-weight:bond;黑体
忘记之前HTML学习的即可
尺寸属性
width:10px;
height:10px;
与后面的盒子模型一起理解,记住:内联元素无法设置尺寸,如<span>
背景属性
background-image:url(#);
background-attachment:fixed;
background-repeat:none;
background-position:10px 20px;
四.布局定位以及盒子模型
盒子模型
指的是每个元素所占的空间位置由它的宽 高 内边距 外边距 和边框共同组成
边框属性
border:10px solid #000000;常配合使用。
border-left: 20px solid #00ff00;仅一条边时。
备注:虚线:dashed;
内边距
padding:50px 四边都是50px的内边距
padding:0px 50px 第一个值上下边距 第二值是 左右边距
3值上 左右 下
4值 上 左 右 下
外边距margin同上
注意:外边距有合并现象
定位问题
position:absolute;relative;fixed;
绝对定位:
常用于做网站的广告条,脱离了文档流,不占原来的流空间,尽量减少使用
z-index只能在绝对定位中使用,不可以在相对定位中使用。
相对定位:占用标准文档流,用于布局
固定定位
君君的备注:
DIV+CSS的学习中,最重要的就是布局问题。在编写代码时不要着急,一定要先理清楚每个素材所在的层次,做到心中有数,才能敲字如有神。
笔记是为了以便自己未来用到时查阅,被人指正内容过于主观,仔细想想确实如果能受惠大众更好,以后会努力改进~
标签:margin 设置 字号 问题 代码 外部 idt repeat 布局
原文地址:https://www.cnblogs.com/anzhilanxiao/p/css.html