nike? adidas? CSS!

来源：互联网发布：光环大数据培训怎么样编辑：程序博客网时间：2024/04/28 02:44

前几天说到了js 今天来说说CSS

那么什么是CSS？哈哈 CSS就是网页的一层华丽的外衣 (我用了两个运动服装的牌子和CSS来做比较)

我们可以将一个网页分成几部分

结构事件样式

什么是结构？就是文字的前后顺序以及图片的上下位置相对应的就是HTML代码

什么是事件？就是当我们鼠标点击或者是某个事件被触发以后触发的某个事件比如鼠标单击弹出对话框相对应的就是JavaScript代码

什么是样式？这也是我这篇文章要说到的就是我们在网页中看到的颜色图片 flash等相对应的就是CSS样式表

再做一个通俗的比喻：

如果将一个特别漂亮的网站比作是一个人那么css就是这个人的衣服 javascript就是这个人能吃饭、睡觉、娱乐等等 HTML就是这个人不穿衣服的样子

通过上面的三句话也许您已经知道这三者之间是什么关系的

那么我来详细说一下CSS样式表以下是我的课堂笔记有不对的地方还请您指出以便我改进万分感谢！！！

什么是CSS？为什么要使用CSS？ ↑
Cascading Style Sheets 层叠样式表等于给网页穿上了一个漂亮的外衣
HTML中的标签不够用
实现某个效果简单

编写css添加的协议 ↑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

css中常用的一些属性 ↑
前景色：color:red; 背景色：background-color:blue
控制高度：width：300px
控制宽的：height：200px
修改文字字体：font-family:幼圆
文本水平居中：text-aalign
去掉/显示文字的下划线：text-decoration:none / underline
控制边框：border-clolr;    bolor-style;    border-width
添加背景图片bankground-image:图片地址
图片的坐标定位 bankground-Position：-[x]px –[y]px
控制鼠标的样式 cursor：url(‘图片名称’)
控制元素的显示 display：none(不显示) / hidden(显示)
Div为行间标签会自动换行
Span为行内标签不会自动换行
列表样式
  去掉前面的字符引导 list-style-type：none
  变为横向的标签 float：left；
合并边框 border-collapse：collapse
字体横着排列 float ：left
之间有空格 margin-right：2em

怎么给html中添加CSS（使用的是外部样式）↑
1. 在html中给要添加CSS样式的地方增加一个id标记比如 id=“css”
2. 创建后缀名为.css的文件以txt的方式进行编辑[最好为CSS样式表单独创建一个文件夹]
3. 添加css代码
比如上面我要在id=“css”的地方添加css代码
# css
{ color:red; // 颜色 font-family:幼圆; // 字体 font-size:30px // 大小 }

4. 使用css给html填充背景色
body { background-color=#aaaaaa; }

CSS中的注释 ↑
注释 /**/
使用内嵌的时候为了考虑就得浏览器的误识别
将所有标签写在html注释当中

样式的分类 ↑
1.行内样式：（内联样式）：在标签后直接添加样式属性
直接给标签添加属性 style=“border:1px solid red;height:30px;width:50px”

2.内嵌样式：如果多处用到了相同的样式那么就使用内嵌样式，在<head>中定义
定义：(如果出现的div标签就改变样式)
  <title></title>
  <style type=”text/css”>
   div
{
border:1px solid red;
height:30px;
width:50px
}
3.外部样式：统一样式可以应用于多个页面就像使用类库一样可以共享重用
A.[新建一个文件夹一般命名为style 最好新建 ]
B.在文件夹中新建一个.css文件
C.在里面写上css代码
D.在html中引用该样式
  引用语法： <link type="text/css" rel="stylesheet" href="css文件的路径"/>
  将这条语句放在<head>标签中

Overflow
如果有一个容器里面放的东西比容器的空间大那么就叫做溢出(overflow)
  overflow 有以下几个属性

   1.visble 全部显示不按照容器大小显示
   2.hidden 隐藏部分
   3.scroll 隐藏给一个滚动条
   4.auto 如果溢出就有滚动条否则没有

用法： overflow：hidden

去掉浏览器和元素之间的距离（网站中常用）↑
<body style =”margin:0px; padding:0px;”>

Padding 属性 ↑
padding:100px元素内元素和边框的距离

margin 属性 ↑
margin:60px 元素外元素和浏览器边界的距离

边界顺序：
单值-全部
   双值-上下，左右
   三值-上，左右，下
   四值-上右下左

编写选择器要注意的地方 ↑
我们在编写选择器的时候最要使用heml的注释将选择器注释起来（<!—这是注释—>）这样做是为了避免老式浏览器出现不能解析的错误 css中的注释和c#一样 //

标签选择器 ↑
适用场合：更改所有相同的标签
  // 给html中所有具有<p>标签都更改属性
<style type ="text/css">
  p
  {
   text-family:宋体;
   font-size:50px;
   color:red
  }
  </style>

使用：<p>你好</p>

类选择器 ↑
适用场合：更改添加了类名的标签
// 给html中所有添加了MyClass类名的标签都更改属性
<style type ="text/css">
  .MyClass
  {
   text-family:华文彩云;
   font-size:100px;
   color:blue
  }
</style>

使用：<p class="MyClass">你好</p>

ID选择器 ↑
适用场合：更改增加了某一个id的某一个标签（规定一篇html只能有唯一的一个id）
// 给html中某一个标签更改属性
<style type ="text/css">
  #123
  {
   text-family:幼圆;
   font-size:150px;
   color:yellow
  }
</style>

使用：<p id="123">你好</p>

三种选择器的联系与区别:
1.标签选择器针对的是固定的标签只要是定义了样式的标签全部更改样式
2.类选择器针对多个添加了类名的标签只要添加了类名才更改样式
3.ID选择器针对某一个标签规定不能添加相同的id 只更改某个固定的id标签样式

标签类选择器（类选择器的重载）↑
适用场合：类选择器比较多时每一个类起一个名字会不方便记忆起一个一样的名字前面加上不同的标签名就可以了
// 定义类名相同但是标签不同的标签类选择器
<style type ="text/css">
  h1.title
  {
   text-family:隶书;
   font-size:100px;
   color:green
  }
  h2.title
  {
   text-family:仿宋;
   font-size:90px;
   color:yellow
  }
  h3.title
  {
   text-family:宋体;
   font-size:90px;
   color:black
  }
</style>

使用： <h1 class="title">一级菜单</h1>
  <h2 class="title">二级菜单</h2>
  <h3 class="title">三级菜单</h3><br/>
  <hr/>
  <h1 class="title">一级菜单</h1>
  <h2 class="title">二级菜单</h2>
  <h3 class="title">三级菜单</h3><br/>

选择器的优先级 ↑
公用的选择器低特有的选择器高
比如三种选择器的从高到低是：
Id选择器->类选择器->标签选择器

手动调整优先级：!important

集体声明选择器 ↑
  适用场合：多个标签具有相同的属性
// 添加<h1>,<p1>,<a>,<span>,<div>标签的属性
<style type ="text/css">
   h1,p1,a,span,div
   {
    text-family:宋体;
    font-size:90px;
    color:black
   }
  </style>

全局声明 ↑
适用场合：更改页面中的所有标签（要考虑优先级的问题）
// 更改页面中的所有属性
<style type ="text/css">
  *
  {
   color:black
  }
</style>

嵌套声明 ↑
适用场合：一般应用于table标签等（具有父子关系的标签）
// 将页面中的table标签中文字改为红色
<style type ="text/css">
  table tr td
  {
   color:red;
  }
</style>

伪选择器（伪class属性）↑
伪选择器：就是给某个标签的某个状态添加样式（比如鼠标经过时字体变红）
语法：
   标签：状态
   {
    // 样式
}
常用状态：
  link  表示鼠标放上去之前
  hover 鼠标放上去的时候
  active 点击的时候
  visited 点击以后

例子：
   伪选择器现在只能用在<a>标签上除非使用JavaScript
   // 鼠标放上去的时候字的颜色变为红色
  a: hover
  {
   color:red;
}

使用伪选择器除了便签以外还可以使用类和ID
比如：
.MyClass. hover
{
color:red;
}

#123. hover
{
color:red;
}

文档流与定位 ↑
什么是文档流：就是将html中的每一个标签像堆积木一样从左往右从上到下的堆砌
什么是定位：控制他的位置

1. 绝对定位（absolute）:可以控制对象在浏览器的任何一个地方出现
position:absolute; /* 1.脱离了文档流就不能在堆砌了 */
right:100px;
top:100px
我们可以控制每个标记的层次默认情况下是按照html代码的顺序
如果要更改顺序可以使用z-index属性数字越大标记越在前面
z-index：1

2. 固定定位(fixed) ：将对象固定在某个位置如果不设定位置默认在堆砌的位置
position: fixed; /* 1.脱离了文档流就不能在堆砌了 */
right:100px; /* 将对象固定在设置的位置如果不设置默认就是堆砌的位置 */
top:100px

3. 相对定位（relative）：根据上一个对象堆砌的位置在原来位置的基础上来增加或者较少移动的位
position: relative;

盒子模型 ↑

(作者注释：由于我的笔记是.doc格式的所有的标题都有超链接以及标题颜色如果直接复制过来的话会有格式不支持的情况为了统一我在全部转换成了txt 所以会没有颜色希望大家见谅)