css（1）

css基本样式

/*  */css内容注释

选择器{属性：值；}

width：px；宽度

height：px；高度

px->像素

%->百分比

body{background-color ：;}可以改变浏览器窗口背景颜色

内联样式

在html标签上添加style属性实现的

style=""

内部样式

在

外部样式

引入一个单独的css文件

通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址。

（1）link rel="stylesheet"href="css文件夹/文件>

（2）

css颜色表示

background-color：；背景颜色

color：；颜色

transparent透明颜色

（1）单词表示法：red、blue、green、yellow……

（2）十六进制表示法：由0123456789 abcdef组成，比如#5ac87f、#0f0f0f……

（3）RGB三原色表示法：红绿蓝用rgb表示（）（）（）取值范围0-255

css背景样式

background-color：；背景颜色

background-image：url（ ）；背景图片

（1）background-repeat：；背景图片平铺

  repeat-x x轴平铺

  repeat-y y轴平铺

  no-repeat 不平铺

（2）background-position：；背景图片的位置

  x轴（ ）px  y轴（ ）px

  x轴100%      y轴100%

  x轴  left 左 center中间 right右

  y轴  top上  center中间 bottom下

（3）background-attachment：；背景图随滚动条的移动方式

  scroll默认

  fixed固定

（4）background-size：；背景图片大小

  x轴（ ）px  y轴（ ）px

  x轴100%      y轴100%

  cover完全覆盖

  contain包含图片，覆盖不满

css边框样式

（1）border-style：；边框样式

  solid实线

  double双实线

  dashed虚线

  dotted点状线

  border-width：；边框大小

  border-color：；边框颜色

（2）边框也可以针对某一边单独设置

  border-      -style：；

  left左

  right右

  top上

  bottom下

css文字样式

（1）font-family：；字体类型

  英文字体：Arial，'Times New Roman'……

  中文字体：微软黑体，宋体……

（2）font-size：;字体大小

  默认是16px

  字体大小建议用偶数

（3）font-weight：;字体粗细

  数值写法： 100-900

  单词写法： 正常（normal） 加粗（bold）

（4）font-style：;字体样式

  模式： 正常（normal）斜体（italid）倾斜（oblique）

  italid  带有倾斜属性的字体才可以设置倾斜操作

  oblique  没有倾斜属性的字体也可以设置倾斜操作

（5）color：；字体颜色

（6）text-decoration：；文本修饰

  none不添加任何装饰

  underline下划线

  overline上划线

  line-through删除线

（7）text-transform：；文本单词大小写取值

  capitalize单词首字母大写

  lowercase所有单词小写

  uppercase所有单词大写

（8）text-indent：；首行缩进

  em单位：相对单位，一个em永远跟字体大小相同

（9）text-align：；文本对齐方式

  left靠左

  right靠右

  center中间

  justify两端对齐只对多行文本有用

(10)line-height：；定义行高

  默认行高：不是固定值，而是变化的。根据当前字体大小不断变化。

  取值：（    px）像素    （数值）比例值，跟文字大小成比例

(11)间距

  letter-spacing：；定义字间距

  word-spacing：；定义词间距（针对英文）

(12)折行

  word-break：break-all；（非常强烈的折行）

  word-wrad：break-word；（不是那么强烈的折行，会产生一些空白区域）

复合样式

一个css属性只控制一种样式，叫单一样式。

一个css属性控制多种样式，叫做复合样式。

复合的写法是通过空格的方式来实现的。

(1)background：；颜色 图片 平铺 位置……（顺序无要求）

background：red url（ ） no-repeat center center；

border：；大小 颜色 样式……（顺序无要求）

border：2px black solid；

(2)font：；……大小 类型

（最少要有大小和类型这两个值顺序不能变）

（它们两个也要写到最后）

（行高可以写在大小后面记得加/）

font：bold italic 30px/40px 宋体

尽量不要单一样式和复合样式混写

如果非要混写，那么一定要先写复合样式在写单一样式

css列表属性

(1)list-style-type：；初始列表

disc实心圆

circle空心圆

square实心正方形

none不显示

(2)list-style-image:url(  );图片列表

(3)设置列表项标记的放置位置

list-style-position:（ ）；

outside    列表外面

inside      列表里面

list-style：复合属性  可以把3个属性都写在一起