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

CSS样式表

程序员文章站 2022-05-07 09:05:34
...

1 使用css样式的方式

 
html <!DOCTYPE>声明
html4
html5  <!DOCTYPE>
 
 
内联样式表
<body style="background-color: seagreen;margin: 0;padding: 0;">

嵌入式样式表<style type="text/css"></style>
需要将样式放在<head></head>之中

引入样式表
<link rel="stylesheet" type="text/css" href="style.css">
 
定义样式表
HTML标记选择器
<p></p>
p{属性:属性值;属性1:属性值1}
p可以叫做选择器，定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性，他们之间需要用分号隔开


class定义
<p class=“p”>…</p>
class定义是以.开始
.p { 属性：属性值}

ID选择器
<p id=“p”>….</p>
ID定义是#开始的
#p{属性:属性值}

优先级
ID > Class >HTML
同级时选择离元素最近的一个
CSS常见属性
1 颜色属性
color属性定义文本的颜色
color:green
color:#ff6600
color:#f60

2字体属性
1 font-size 字体大小
   px:设置一个固定的值
   %:父元素的百分比
   larger:比父元素大
   smaller:比父元素小
   inherit:继承父元素的
   
2 font-family 字义字体
   font-family:微软雅黑、serif
   可以使用逗号隔开，以确保当字体不存在的时候直接使用下一个
   font-weight 字体加粗
   font-style 字体样式
   font-variant 小型大写字母显示文本


3 背景属性
    背景颜色 background-color
    背景图片background-image
    背景重复 background-repeat
           repeat repeat-x repeat-y no-repeat 

    背景位置background-position
           横向left centre right
   纵向top centre bottom
    
4 文本属性
   text-align 横向排列 left center right
   line-height 文本行高
                     a)%基于字体大小的百分比行高
                     b)数值来设置固定值
   text-indent 首行缩进
   letter-spacing 字符间距离
                        1)normal 默认 2)length设置具体的数值  3 inherit 继承

   direction 文本方向 ltr rtl inherit
   text-transform 文本大小写

5 边框属性
    1)边框风格 border-style
    2)边框宽度 border-width
    3)边框颜色 border-color
   
 
div css 布局
1  div和span
div和span在整个html标记中，没有任何意义，他们的存在就是为了应用css样式
div和span的区别在于，span是内联元素，div是块级元素

2 盒模型
盒子外边距:margin
鸽子内边距:padding
盒子边框宽度：border
盒子宽度：width
盒子高度：height

3 布局相关属性
1)position定位方式
relative 正常定位
absolute 根据父元素进行定位
fixed 根据浏览器窗口进行定位
static 没有定位
inherit 继承

2)  定位
left right top botton

3)z-index 层覆盖先后顺序(优先级)

4)display  显示属性
   none层不显示   
   block 块状显示，在元素后面换行，显示下一个块元素
   inline 内联显示，多个块可以显示在一行内
   块元素可以显示宽度，内联元素不可以显示宽度          

5)float 浮动属性

6)clear清除浮动

7) overflow溢出处理

上一篇： 精通CSS:第4章 背景图像效果

下一篇： 精通CSS：第2章 可视化格式模型

推荐阅读