JavaEE Day02 CSS

Day02 CSS

目录

• 什么是CSS？
• css的引入方式
  • 内联样式
  • 内部样式表
  • 外部样式表
  • 优先级
• css的基本语法
  • 说明：
    • 颜色：
    • 值存在多个单词或者汉字情况，最好使用双引号引起来
• css选择器
  • 基本选择器
    • 标签选择器
    • id选择器
    • class选择器
    • 通配选择器
  • 属性选择器：
  • 组合选择器
    • 后代选择器
    • 并集选择器
    • 交集选择器
• css属性
  • 文字属性
  • 文本属性
  • 背景属性
  • 宽高属性
  • 列表属性
  • 其他属性
• 盒子模型
• 浮动
  • float

---

什么是CSS？

Cascading style sheet：层叠样式表
用于给html元素添加样式

css的引入方式

内联样式

行间样式（html文档和样式不分离）优先级最高

<p style="color:red;">测试</p>

内部样式表

html文档和样式分离，样式可复用，（不能再多个html文档中复用）

<style>
    p{
        color:red;
    }
    h2{
        color:green;
    }
</style>

外部样式表

html文档和样式彻底分离（可以在多个html文档中复用）

<linkrel="stylesheet"href="/html_day02/css/myStyle.css">

优先级

行间样式>非行间样式，非行间样式看那个最后执行

css的基本语法

选择器{
	声明1;(属性名:值)；
	声明2;
}

说明：

颜色：

1. 英文单词：red，green
2. 6位16进制数据表示：#FF0000 红色，#00ff00 绿色
   1. rgb：三原色
   2. 如果每两位都相同，可简写为三位
   3. #000 白色，#fff黑色
3. Rgb(0,0,0): 0 -255

值存在多个单词或者汉字情况，最好使用双引号引起来

css选择器

基本选择器

标签选择器

以标签名称进行选择

p{
   color: red;  
}

id选择器

以id值选择（不能直接复用样式）

#p1{
    color: red;  
}

class选择器

以class值选择

.p2{
   color: red;  		
}

通配选择器

选择素有标签

*{
    color：red;					
}

属性选择器：

[name]{
    border: 1px solid red;
}

[name="password"]{
    color: red;  
}

组合选择器

后代选择器

#p1 span{
    color: red;
}

并集选择器

#p1,h2{
    color: red;
}

交集选择器

p.red{
     color: red;         
}

css属性

文字属性

修改文字信息

1. font-family：字体系列
2. fount-size: 控制字体大小
   1. 英文单字：small,large
   2. 参照父元素：smaller larger %
   3. 固定值：20px
3. fount-weight: 粗细程度
   1. 英文单词：lighter normal bold bolder
   2. 具体数字：100-900
4. font简写属性
   1. Font:900 30px/93px arial,"华文行楷"

文本属性

1. line-height：行高
2. color：文本颜色
3. text-align：水平对齐方式
4. text-decoration:修饰文本（none)

背景属性

1. backgroud-color:背景颜色
2. background-image：背景图像
3. background-position:起始位置
   1. background-position-x:横向移动图片
   2. background-position-y:纵向移动图片
4. background-repeat:是否重复
   1. repeat:默认值
   2. repeat-x：水平平铺(横向重复)
   3. repeat-y：垂直平铺（纵向重复）
   4. no-repeat：不平铺（不重复）
5. background 简写

宽高属性

1. width: 10px %
2. height:

列表属性

list-style-type:none
去除无序列表前面的符号

其他属性

display:显示状态
1. block:显示
2. none:影藏

盒子模型

1. border：边框

   border：1px solid black
   

2. padding:内边距，边框和和内容之间的间距

   padding: 20px 10px 10px 30px 
   

   顺序是：上右下左

3. margin：外边距，边框和父元素或者兄弟元素的间距

   margin: 20px 10px 10px 30px
   

4. 计算盒子的宽度:
   内容+2（边框+padding+margin）

浮动

float

left,right
脱离标准文档流；

1. left/（right）：挨着父元素的左边框/（右边框），或者已经浮动兄弟元素的右边框（左边框）停止浮动；
2. clear：清楚浮动
   left right both