CSS2(相较于1具体 更多功能还是看api)

1.
css的语法
selector {property: value}
即 选择器{属性:值}
学习css即学习有哪些选择器,哪些属性以及可以使用什么样的值


2.id选择器 选择器
可以直接在标签里用style 或者在head内 使用 style
既可以不想没用的将所有标签都改 也可以通过ID来让对应的标签使用你想让使用的属性
直接用标签选择如:p{ color:xx; }
或者 #id001(#啥都行){ 属性:值 }

3.类选择器 ::当需要多个元素,都使用同样的css的时候,就会使用类选择器
此外,如果都是一样的标签如<p></p>
一部分想绿 一部分想红 那么就要用类选择器了
<style> .lv前可以加上标签名字
.lv{
color:green; <p class="lv">前2个</p>
} <p class="lv">前2个</p>
.red{ <p class="red">后2个</p>
<p class="red">后2个</p>
color:red;
}
如果已经知道这个给那个标签用了就
p.lv...(意思是给p用的 此时在标签p 上class=n)
</style>

4.id选择器和类选择器区别:id选择器不可以复用 (类似人的身份证 但是如果复用了编译器报错浏览器照样显示)
class可以复用 id的优先级要高于class,


5css注释 /**/

6 尺寸 属性width 如给背景设置尺寸
width:180px;
height:50px;
background-color:green;


7背景:属性名background-color
图片做背景:background-image:url(/study/background.jpg); 外皮自己加哈
width:200px;
height:100px;
背景重复:就是当图片大小不足你设置的长和宽 此时是否再用这个图片将不足部分给补上
background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
背景平铺:属性:background-size 值:contain 会有失真

8.文字颜色:直接color:pink(别的也行)标签自己定
对齐: 属性:text-align 值:left,right,center
文本修饰:属性:text-decoration 值: 上划线:overline 删除划线效果:line-through 下划线:underline
默认超链接: none
行间距::line-height +数字或者百分比
字符间距:letter-spacing 值: 数字
单词间距:属性:word-spacing 值: 数字
首行缩进:text-indent 数字 类似开头写作文
大小写:属性:text-transform 值: uppercase 全部大写 capitalize 首字母大写 lowercase 全部小写
空白格:属性:white-space
(1) normal 默认。多个空白格或者换行符会被合并成一个空白格
(2)pre 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器也不会换行。
(3) pre-wrap 有多少空白格,显示多少空白格,相当于pre标签,如果长度超出父容器,会换行。
(4) nowrap 一直不换行,直到使用br

9 字体
字体尺寸:属性:font-size 值:数字或者百分比
风格:font-style: normal 标准字体 italic 斜体
粗细:属性 font-weight normal 标准粗细 bold 粗一点
字库:属性font-family
可以将所有风格设置在一起:font:italic bold 30px "Times New Roman";


10 鼠标样式:如将鼠标放到文字上就会改变形状 属性cursor:其中一个值crosshair; 有很多啊o((>ω< ))o


11 表格布局选择器:属性:table-layout automatic; 单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
表格边框:属性:border-collapse值:separate:边框分隔 collapse:边框合并


12边框:使用边框必须加上 border-style:xx ; 否则不显示
(1) 边框风格 属性: border-style solid: 实线 dotted:点状 dashed:虚线 double:双线
(2) 边框颜色 属性:border-color
(3)边框宽度 :属性:border-width 值:数字 (1)(2)(3)可以放在一起ヽ( ̄ω ̄( ̄ω ̄〃)ゝ
(4)某个方向上有边框:通过制定位置,可以只给一个方向设置边框风格,颜色和宽度
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
边框的操作可以给表格用哟 将标签table设置上就ok了
(5)块级元素和内联元素的边框区别:
块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等

猜你喜欢

转载自www.cnblogs.com/whydbk/p/12666507.html
今日推荐