黑马程序员技术交流社区

标题: Web前端-CSS [打印本页]

---

作者: 森111    时间: 2018-12-29 14:59
标题: Web前端-CSS

<center>

Web前端-CSSCSS
1.CSS-层叠样式表

CSS与HTML结合的方式

- 行内式:<标签 style = "属性名:属性值">
- 内联式:<style>样式设置</style>
- 外链式:<link rel="stylesheet" href=".css">

CSS语法

<style>
   选择器{
       属性名:属性值
   }
</style>
==2.CSS选择器==

基础选择器-类选择器

<style>
  .class{}
</style>

基础选择器-id选择器

<style>
   #id{}
</style>

基础选择器-标签选择器

<style>
   tag{}
</style>

扩展选择器-并列选择器

并列选择器选择并列的所有元素
<style>
   元素1,元素2....{}
</style>

扩展选择器-后代选择器

后代选择器选择父元素中的所有后代元素
<style>
   父元素 后代元素{}
</style>

扩展选择器-子元素选择器

后代选择器选择父元素中的直接子元素
<style>
   父元素 子元素{}
</style>

扩展选择器-属性选择器(一般针对input标签)

属性选择器 元素属性为 特定的属性名及属性值的元素
**如果只写属性名,则选择元素中包含该属性名的元素
<style>
   元素[属性名="属性值"]{}
</style>

扩展选择器-伪类选择器

伪类选择器选择符合状态的元素
<style>
   元素:状态{}
</style>
3.CSS属性

文本

- text-align:文本对其
- color:文本颜色
- vertical-align:垂直对其
- font-size:字体大小
- line-height:行高 -设置行高等于height可以使里面的元素垂直居中

背景

- background-color:背景颜色

边框

- border:线宽(1px) 线型(solid/dashed) 颜色

尺寸

- height: 高度,注意高度一般不能设置百分比
- width: 宽度,可以设置百分比==4.盒子模型==**

外边距:margin

- margin:auto 可以将对象设置为居中

内边距:padding

使用padding设置时会改变整体box的大小,所以一般作如下设置:
- box-sizing:border box==5.浮动==**注意:要理解浮动的原理
     ****子元素相对于父元素浮动,即子元素相对于父元素悬浮起来,和父元素不在同一个平面上.
用法:
     -float : right/left 创建浮动
     -clear: both 清除浮动
什么时候需要浮动?
     对于一个整体排版需要按照左右排版时可以使用浮动来控制,如ul的横写

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2