css的那点事儿
如果说想给页面写css样式了,必须要先写一个style标签
格式:
<style>
css样式内容
</style>
一、元素类型
1.块元素;
特点:
1.独占一行;
2.可以设置宽高;
3.不受空格影响;
p div h1-h6 ol ul li
2.行内元素;(一行之内的元素)
特点:
1.不独占一行;
2.不可以设置宽高;
3.受空格影响;(仅受一个空格的影响)
span a i em b strong
超链接标签:
格式:
<a href="链接地址" ></a>
*在写a标签的时候,必须要有href属性,才可以实现链接效果;
*如果想a标签跳转已有的线上项目的话,格式:
herf="http://链接地址"
3.行内块元素;(一行之内的块元素)
格式:
1.不独占一行;
2.可以设置宽高;
3.受空格影响;(仅受一个空格的影响)
img
<img src="图片的路径" />
二、选择器
1.标签选择器(元素选择器)
格式:
标签名{
css样式;
}
2.类选择器(class选择器)-----(相当于给元素起一个昵称、或者是绰号)
格式:
<div class="class自定义名字" ></div>
.class名字{
css样式;
}
三、css属性
格式:
属性名: 属性值;
例:
width: 像素值(单位:px);
width: 像素值; 设置宽度;
height: 像素值; 设置高度;
设置背景色:
background: 可以放颜色的单词(十六进制的颜色的色值); 设置背景颜色;
设置背景图:
background: url("图片的路径") 图片是否重复 x轴的位置 y轴的位置;
repeat-x(横向平铺) left|center|right top|center|bottom
repeat-y(纵向平铺) 像素值 像素值
no-repeat(不重复)
边框:
格式:
border: 边框的宽度 线性 边框的颜色;
例:
border: 1px solid red;
1像素 实心的 红色
附加:
PS的使用方法:
1.ctrl+R 显示标尺
2.如何显示信息板?
答:热键F8
3.如果信息板显示的不是像素单位怎么办?
答:编辑菜单---首选项---单位与标尺---标尺(像素);
PS软件切图:
矩形选中工具进行选中----ctrl+c------ctrl+n(新建)------ctrl+v-----ctrl+s(保存)
保存格式:png、jpg
以上就是本文要讲的内容,本段文字只讲了css的简单认识,我们下期再会 *注:以上内容均来自智游集团张瑞传授*