CSS学习笔记

最新推荐文章于 2024-07-19 14:58:51 发布

原创最新推荐文章于 2024-07-19 14:58:51 发布 · 533 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端

前端 [HTML/HTML5/CSS] 专栏收录该内容

11 篇文章

订阅专栏

一、CSS 概述（了解）

CSS： Cascading Style Sheet 层叠样式表
CSS 作用就是给html页面标签添加各种样式
为什么用CSS
- html的缺陷：
  - 1，不能够适应多种设备
  - 2，要求浏览器必须智能化足够庞大
  - 3，数据和显示没有分开
  - 4，功能不够强大
- css的有点：
  - 1，使数据和显示分开
  - 2，降低网络流量
  - 3，使整个网站视觉效果一致
  - 4，使开发效率提高了

二、CSS 语法

p{color：red；}
选择器{属性名：属性值；}
    选择器后一定是大括号，属性名后必须用冒号隔开，属性值后用分号，属性名和冒号之间最好不要有空格。

三、CSS和HTML的结合方式

css代码理论上位置是任意的，但通常写在style标签里

a.行级样式表：采用style属性，范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
b.内嵌样式表：采用<style>标签完成。范围针对此页面
c.外部样式表：采用建立样式表文件。针对多个页面。
1. 采用<link>标签
  eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2. 采用impor，必须写在<style>标签中，并且必须是第一句
  eg：@import url(a.css);

两种引入方式的区别：外部样式表中不能写<link>标签，但是可以写import语句

四、CSS选择器

1，基本选择器
- 1.1 标签选择器：指的就是选择器的名字代表html页面上的标签
  p{
  color:red;
  border:1px dashed greee;
  }
- 1.2 类选择器：规定用原点来定义
  优点：灵活
  eg: .one{background-color:#ff0099; }
- 1.3 ID选择器：规定用#来定义
  eg: #one{cursor:hand; }
  区别：标签选择器针对的是页面上的一类标签，类选择器可以供多种标签适用，ID选择器是值供特定的标签（一个），ID是此标签在此页面上唯一标识
- 1.4 通用选择器：用*定义，代表页面上的所有标签。
  *{
  font-size：30px：
  margin-left：0px;
  margin-top:0px;
  }
2，扩展择器
- 2.1 组合选择器：采用逗号隔开
  eg: p,h1,h2,.one,#two{color:red ; }
- 2.2 关联选择器（后代选择器）：采用空格隔开
  eg: h4 span i{color:red ; }
  表示h4标签中的span标签中的i标签的样式，h4和span和i标签不一定是紧挨着的。
- 2.3 伪类选择器
  1）静态伪类：规定是用：来定义，只有两个，只能用于超链接。
  :link表示超链接点击之前的颜色
  :visited表示链接点击之后的颜色
```
a:link{color:red ;}
a:visited{color:yellow;}
```
  注意： a:link{}定义的样式针对所有的写了href属性的超链接(不包括锚),a{ }定义的样式针对所有的超链接(包括锚)
  
  2)动态伪类：针对所有标签都适用
  :hover : 是移动到某个标签上的时候
  :focus : 是某个标签获得焦点的时候
  :active : 点击某个标签没有放松鼠标时
  eg: label:hover{color:#00ff00; }
  input:focus{
  background-color:#ff9999;
  border:1px solid red;
  }
  a:active{
  color:blue;
  }

五、CSS各种选择器的冲突(掌握)

CSS样式的冲突:
1.ID选择器 > 类选择器 > 标签选择器
2.行级样式表 > 内嵌样式表 > 外部样式表
外部样式表的ID选择器 > 内嵌样式表的标签选择器
原则：就近原则

六、CSS的各种属性(掌握)

css的单位
- a. 绝对单位 1in=2.54cm=25.5mm=72pt=6pc（pt是点或者磅，pc是派卡）
- b. 相对单位：px，em（印刷单位相当于12个点），%（相对周围的文字）

字体设置

 p{
        font-size:50px;    /*字体大小*/
        font-style:italic ;  /*斜体*/
        font-weight:bold;  /*粗体*/
        font-family:幼圆;  /*字体类型*/
        font-variant:small-caps;  /*小写变大写*/
    }

文本设置

p{
        letter-spacing:0.5cm ; /*字母间距*/
        word-spacing:1cm;   /*单词间距*/
        text-align:center;   /*在所包含容器的中间*/
        text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/
        text-transform:lowercase;  /*单词字体大小写*/
        color:red ;
    }

背景设置

body{
        background-color:#ff99ff ;  /*背景颜色*/
        background-image:url(images/2.gif) ; /*背景图片*/
        background-repeat: no-repeat;  /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/
        background-position:center right; /*背景位置*/
        background-attachment: scroll ;           /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/
    }

列表设置

ul li{
        list-style:none;    /*列表前样式*/
        list-style-image:url(images/2.gif) ;  /*列表项前图片*/
        margin-left:80px;  
    }

盒子模型(border margin padding)

padding:是内容到边的距离
border: 是边的粗细
margin:是控件到控件的距离

定位设置(position,float,clear,z-index)

#d{
        position: absolute;   
                 /*
                  1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流
                  2.相对定位: 相对的是自己在顺序流中原来的位置
                */

        left:100px;    /*横坐标*/
        top:100px;     /*纵坐标*/
        border:1px solid red ;  
        width:100px;
        height:100px;
        background-color:#ff66ff;
      }

#d1{
        position: relative;    /*相对位置*/
        left:100px;
        top:100px;
        border:1px solid green ;
        width:100px;
        height:100px;
        background-color:#339900;
       }

span{
        position: relative;
        left:20px;
        top:20px;
       }

z-index:值任意，值越大离我们越近

   float : 浮动
   overflow: 超出范围怎么办

鼠标样式设置(cursor)

七、滤镜(了解)

CSS种使用方式

样式表放在不同的地方，产生作用的范围也不同。大致来说，样式表分为内联样式表和外联样式表，即有页面内放置、外部引用、外部导入三种方式。

行间样式表
行间样式表示指将css样式编码写在html标签中，格式如下：
```
<h1 style="font-size:12px;color:#000FFF">
我的CSS样式。
</h1>
```
行间样式表由HTML元素的HTML元素的style支持，只需将CSS代码用分号隔开写在style=”“之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。
内部样式表
内部样式表与行间样式表相似都是把CSS代码写在HTML页面中，稍微不同的是前者可以将样式表放在一个固定的位置，格式如下：
```
<html>
    <head>
        <title>内部样式表</title>
        <style type="text/css">
           h1{font-size:12px;
           color:#000FFF
           }
        </style>
    </head>
    <body>
        <h1>我的CSS样式。</h1>
    </body>
</html>
```
内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。
外部样式表
外部样式表是CSS应用中最好的一中形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用一个样式文件表，这样能够实现代码的最大限度的重用及网站文件的最优化配置，格式如下：
```
<html>
    <head>
        <title>外部样式表</title>
        <link rel="stylesheet" rev="stylesheet" href="style.css">
    </head>
    <body>
        <h1>我的CSS样式。</h1>
    </body>
</html>
```
在style.css中的代码为
```
h1{font-size:12px;
  color:#000FFF
  }
```
我们在中使用了标签来调用外部样式表文件。将link指定为stylesheet方式，并使用了href=”style.css”指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。