Java学习笔记（十四）：CSS

写在前面：

学习网站：https://www.w3school.com.cn

添加方式（head内）

属性style

<style>

<link rel='stylesheet'  href='url'>

选择器

div    .class     #id      *

A,B（A和B）     A B（A下的B）      A>B（B上的A）

A[属性='值']       A:状态        A:first-child

属性

float (左右) margin: auto水平、vertical-align: middle垂直（外边距，上右下左） padding（内边距）(固定大小：box-sizing: border-box)

border-(top right bottom left)-(style color width) border: 1px solid red; border-radius: 5px

font-size     line-height     text-align: center     color

backgroung: #ff0000 background: url('url')  no-repeat  center

---

1. 简单介绍+语法

三种使用方式

内联：在标签内使用style属性  style=' color:red; '

内部：head标签内，定义style标签，里面写CSS代码

外部：head标签内，定义link标签引入外部.css文件  <link rel='stylesheet' href='url'>

            也可以在style标签内引入：@import 'url'

CSS语法：

选择器{

    属性名1 : 属性值1;

    属性名2 : 属性值2

}

 

2. 选择器

基础选择器

标签名 {}

.class {}

#id {}

扩展选择器

* {}   ：所有元素

---

选择器1, 选择器2 {}   ：并集

选择器1  选择器2 {}   ：子（1下的2）

选择器1 > 选择器2 {}   ：父（2上的1）

---

 

 

 

 

选择器:first-child {}    ：第一个这个选择器（last-child最后一个）

---

标签名[属性名='属性值'] {}   ：有这个属性值的标签

标签名:状态 {}    ：这个状态下的标签

a的状态：
link初始状态，hover鼠标悬浮，active正在访问，visited被访问过

 

3. 属性

字体

color: #ff0000;     

font-size: 30px;     

text-align: center;      对齐方式（right右对齐）

line-height: 50px;     行高（值等于height的值，则文字垂直居中）

边框（复合属性）

border: 1px solid red;     宽度1像素，实线，红色

border-left-color     (top,right,bottom,left)    ( color, style, width )

border-radius: 5px;       圆角

尺寸

width, height

背景

background: url('图片url')  no-repeat  center;       图片为背景，图片不重复，居中

background-color: #ff0000;       

盒子模型（页面布局）

margin: auto;      水平居中（垂直居中：vertical-align: middle; ）------ 外边距（top,right,bottom,left）

padding ------内边距；默认内边距会影响盒子大小，要设置好大小(让宽高不变)：box-sizing: border-box; 

float ------浮动(到一行) (left,right)