java学习day28--CSS

1. css 概念
cascade      style sheet
级联,层叠   样式  表格

控制网页上标签的各种样式: 颜色,字体,边框,间距...

#2. css 格式
1) 行内样式
每个标签加一个样式
<标签 style="多个样式"></标签>
缺点:样式代码重复

2) 内部样式表

<html>
    <head>
        <style>样式定义</style>
    </head>
</html>

3. 行内样式
<标签 style="多个样式"></标签>
3.1 颜色控制
color:颜色值
 颜色值可以是英文单词:red,blue,green,yellow, black, white
 也可以是红绿蓝三原色: rgb(255,0,0)
 还可以是16进制的值来表示: #FF0000

background-color: 背景色

3.2 字体相关的样式
font-size     像素 n px;   字体本身大小 n em;
font-family   字体名称:如宋体,隶书 ...
font-style: italic; 斜体
font-weight: bold;  粗体

3.3 对齐方式
text-align: center 居中, left 左对齐, right 右对齐

3.4 背景相关
background-image: url(背景图片路径)
background-repeat: 控制背景图片如何重复 no-repeat(不重复) repeat-x  repeat-y  repeat(xy方向上都重复)
background-size: 110px  缩放背景图大小

3.5 div 标签
容器标签,可以容纳其它标签
<div>
    <p>
    <table>
</div>
作用:1)页面布局, 2) 统一处理

3.6 宽高
width: 宽度
height: 高度
单位可以以像素为单位   n px, 还可以是百分比  n %(以父元素为基准)

3.7 边框
border-color: 颜色
border-style: 样式(实线等)
border-width: 宽度
可以把它们合并为一个
border: blue solid 100%;

4.css 层叠式样式表  级联式样式表    cascade
格式: style="样式"
前颜色 color:值              (单词, rgb(红,绿,蓝)  0~255, #红绿蓝  0~FF)
背景色 background-color: 值
背景图片 background-image: url(图片路径)
控制背景图重复 background-repeat: 值(no-repeat, repeat-x, repeat-y)
文字 font-family: 字体值 (宋体,黑体...)
文字大小 font-size: 值 (px 像素,  em 以原始大小比例)
文字样式 font-style: italic;  斜体
文字粗细 font-weight: bold; 粗体
对齐方式 text-align: 值(center, left, right)
文字修饰 text-decoration: 值(line-through 贯穿线, underline 下划线)
边框 border 边框颜色 线条样式 线条宽度;
    border-color: 边框颜色
    border-style: 线条样式( solid 实心线)
    border-width: 线条宽度
    border-top 上边框
    border-right 右边框
    border-bottom 下边框
    border-left 左边框

5. 内间距
标签和内容之间的间隙,称为内间距
padding 可以同时控制4个方向上的内间距
padding : 10px 10px 10px 10px;
          上   右   下   左
          
padding : 20px  5px;
          上下  左右
          
padding : 10px
          上下左右
          
padding-top 
padding-right
padding-bottom
padding-left

6 外间距
同级标签之间的间隙,称为外间距
margin: 10px 10px 10px 10px;
       上   右   下   左
margin :10px       
        上下左右
margin-top 
margin-right
margin-bottom
margin-left
    
7. 盒子模型
外间距 --》 边框 --》 内间距 --》内容

8. z-index 
代表该元素在z轴的位置,数字越大越向外, 要配合绝对定位使用
position:absolute; left:x坐标(向右);  top:y坐标(向下)
    绝对定位

rgba(红, 绿, 蓝, 透明度)
                  0~1    0 表示完全透明, 1 表示不透明

9. 样式表
重用样式
格式:

<html>
  <head>  
    <style>
     样式表
    </style>
  </head>
</html>

猜你喜欢

转载自blog.csdn.net/szy2333/article/details/82419268
今日推荐