css样式学习笔记

视频参见php中文网玉女心经视频教程

讲解的相当的清楚和明白

第1章：css快速入门

1.1 什么是css

改变html框架的样式.

1.2 css的三种引入形式

第一种形式：直接在元素后面使用style的形式

<html>


<body style="background:pink;">

<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

第二种形式：在当前文档中使用style标签引入

<html>

<style type="text/css">
  p{
      color: red;

  }
</style>

<body style="background:pink;">

<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

上面就是给p标签设置文字颜色为红色

第三钟方式，采用引入外部的css文件来引入

Style.css文件的内容如下所示：

p{
      color: blue;

  }

在html中需要引入这个css文件

<html>

<link rel="stylesheet" type="text/css" href="style.css">

<body style="background:pink;">

<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

在html中需要引入css<link rel="stylesheet" type="text/css" href="style.css">文件

1.1 css的基础语法

css的基本语法，主要有两部分构成，一部分是基本的语法，一部分是基本的｛｝

选择器{

属性1:属性值;

属性2:属性值;

}

属性与属性之间使用分号隔开

同时给多个标签添加属性，就是选择器的分组

<html>

<style type="text/css">

h1,h2,h3{
  color: blue;

}
</style>

<body style="background:pink;">

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

</body>
</html>

选择器分组让h1、h2和h3的标题的颜色都是红色

1.1 css的基础选择器

所谓的选择器就是选择需要被操作的元素，选中元素之后用来设置对于的css样式

第一种：元素选择器

例如上面的p标签

color: red;

}

这种就是元素选择器

第二种：类别选择器，通过class来进行选择

<html>

<style type="text/css">

/*类别选择器*/
.list_1{

    color: red;
}
</style>

<body style="background:pink;">

<span class="list_1">您好，小哥哥</span>

</body>
</html>

对于类别选择器，需要在最前面加上一个点进行引用

第二种类别选择器可以和元素选择器一起配合使用，中间使用逗号区别

<html>

<style type="text/css">

p,.list_1{

    color: red;
}
</style>

<body style="background:pink;">

<span class="list_1">您好，小哥哥</span>
<p>您好，小姐姐</p>
</body>
</html>

第三种选择器：id选择器，id在html中必须具有唯一性，使用#进行引用

<html>

<style type="text/css">

/*id选择器*/
#one{

    color: red;
}
</style>

<body style="background:pink;">

<span id="one">您好，小哥哥</span>

</body>
</html>

三者具有优先级：id>class>元素选择器

1.1 派生选择器和属性选择器

派生选择器分为下面的几种：

第一种：后代选择器，也叫做包涵选择器

<html>

<style type="text/css">

/*后代选择器*/
ul em{

    color: blue;
}
</style>

<body style="background:pink;">

<ul>
  <li>小哥哥</li>
  <li><em>小姐姐</em></li>
  <li>小师太</li>
</ul>

</body><em></em>
</html>

Ul具有子元素li，li中又有子元素em，所以em是ui的后代，可以使用后代选择器将em选择出来

父亲后代{

属性:属性值；

}

父亲和后代之间采用空格进行分割，后代选择器中父亲和后代之间可以有多层的间隔，可以选择任意一个后代

第二种：子元素选择器，只能找到对应的子元素，父亲只能找到自己的子元素，中间采用>隔开

<html>

<style type="text/css">

/*后代选择器*/
ul>li{

    color: blue;
}
</style>

<body style="background:pink;">

<ul>
  <li>小哥哥</li>
  <li><em>小姐姐</em></li>
  <li>小师太</li>
</ul>

</body><em></em>
</html>

Ui的子元素是li是可以找到到，如果写成

ul>em{

color: blue;

}

这里是无法找到em的，只能找到对应的子元素。这里要区别子元素和后代元素之前的区别。

第三种：兄弟选择器，二者之间具有相同的父亲

<html>

<style type="text/css">

/*相邻兄弟选择器*/
ul+ol{

    font-size: 60px;
}
</style>

<body style="background:pink;">

<ul>
  <li>小哥哥</li>
  <li><em>小姐姐</em></li>
  <li>小师太</li>
</ul>

<ol>
   <li>小哥哥</li>
  <li><em>小姐姐</em></li>
  <li>小师太</li>
  
</ol>

</body><em></em>
</html>

Ul的相邻兄弟是ol，现在讲ol的字体设置成60px，相邻兄弟选择器之间采用加号进行分割

第四种：属性选择器

<html>

<style type="text/css">

/*属性选择器*/
a[href="http://wwww.baidu.com"]{
   color: blue;

}
</style>

<body style="background:pink;">

<a href="http://wwww.baidu.com">访问百度</a>

</body><em></em>
</html>

属性采用[]进行分割

css中常见的伪类

将a标签中未被访问的链接设置成绿色

<html>

<style type="text/css">

/*属性选择器*/
a:link{

    color: blue;
}
</style>

<body style="background:pink;">

<a href="http://wwww.baidu.com">访问百度</a>

</body><em></em>
</html>

已经访问的连接颜色设置成红色

<html>

<style type="text/css">

/*属性选择器*/
a:link{

    color: blue;
}
a:visted{
    color: red;
}
</style>

<body style="background:pink;">

<a href="https://www.baidu.com/">访问百度</a>

</body><em></em>
</html>

对input输入框设置focus属性

使用focus向input输入框添加样式

<html>

<style type="text/css">

/*属性选择器*/
input:focus{
    background: blue;
}
</style>

<body style="background:pink;">

<a href="https://www.baidu.com/">访问百度</a>
<input type="text" name="name"/>

</body><em></em>
</html>

当输入框获得输入焦点的时候，背景颜色会变成蓝色

接下来介绍下选择first-child类型，向标签的第一个子元素添加样式

如果html中存在两个p标签，我们可以通过frist-child给第一个p标签赋值

<html>

<style type="text/css">

p:first-child{
    font-size: 60px;
}
</style>

<body style="background:pink;">

<p>小哥哥</p>
<p>小姐姐</p>
</body><em></em>
</html>

运行效果如下所示：

如果p标签的第一个元素中还包含了一个b标签，使用first-child如何选择了

<html>

<style type="text/css">

p:first-child b{
    color: red;
}
</style>

<body style="background:pink;">

<p><b>小哥哥1</b></p>
<p>小姐姐</p>
</body><em></em>
</html>

p:first-child b 其中p:first-child就是获得第一个子元素，第一个元素的后代就可以采用父亲空格后代的形式来获得

第1章 css中的常见样式

1.1 css中的文本控制

改变文本的颜色、改变文本的字体等操作

1.1 css中的字体控制

1.1 css中的背景控制

我们来看下案例

给一个p标签设置背景颜色

<html>

<style type="text/css">

.one{
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>

<body style="background:pink;">

<p class="one">小哥哥</p>
<p class="two">小姐姐</p>

</body><em></em>
</html>

运行效果如下所示：

颜色也可以写成二进制的形式background-color: #ff0000;

也可以写成RGB的形式background-color: rgb(255,0,0);

给p标签设置一个背景图片

<html>

<style type="text/css">

.one{
    width: 100px;
    height: 100px;
    background-image: url(1.jpg);width: 200px;height: 768px;
}
</style>

<body style="background:pink;">

<p class="one">小哥哥1</p>
<p class="two">小姐姐</p>

</body><em></em>
</html>

注意添加要添加图片的宽度和高度

width: 200px;height: 768px，设置图片的时候具有默认的属性背景图像在水平和垂直方向上重复。
如果要禁止图片在水平和垂直方向上的重复，可以设置no-repeat属性

可能的值

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

1.1 css中的列表控制

第一种：让列表的编号是数字开头

<html>

<style type="text/css">

li{

    list-style-type: decimal;
}
</style>

<body style="background:pink;">

<ul>
  <li>小哥哥</li>
  <li>小姐姐</li>
  <li>小师太</li>
</ul>

</body><em></em>
</html>

第二种：让图片的编写以图片的形式显示出来

<html>

<style type="text/css">

li{

    list-style-image: url(1.png);
}
</style>

<body style="background:pink;">

<ul>
  <li>小哥哥</li>
  <li>小姐姐</li>
  <li>小师太</li>
</ul>

</body><em></em>
</html>

1.1 css中的链表控制

<html>

<style type="text/css">

a{
    color: red;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
}
</style>

<body style="background:pink;">

<a href="shhh">小哥哥</a>
<a href="sjjs">小姐姐</a>
<a href="jsjjs">师太</a>

</body><em></em>
</html>

第二种使用伪类，当鼠标放在链接上的时候将字体变大

当鼠标点在小姐姐的链接上，对应的字体颜色变大

1.1 css中的表格控制

其中需要强调的是：

border-collapse: collapse;

border-spacing: 20px 50px;

这个两个属性的效果不能同时存在，二者只能同时使用一个

<html>

<style type="text/css">

 table{

     width: 400px;
     height: 400px;
     border-style: solid;
     border-collapse: collapse;
 }
 table td{

     border-style: solid;
 }
</style>

<body style="background:pink;">

<table>
  <tr>
   <td></td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td></td>
  </tr>

</table>

</body><em></em>
</html>

程序运行的效果是：

要让表格显示出来除了个table设置属性之外，还必须单独给td设置属性

table td{

border-style: solid;

}

1.1 css中的常见伪元素

在h2元素的前期添加文字

<html>

<style type="text/css">

 h2:before{

     content: "hello";
 }

</style>

<body style="background:pink;">

<h2>大家好，我是家具家电</h2>

</body><em></em>
</html>

程序运行的效果是：

也可以在之前插入图片

h2:before{

content: url(1.png);

}

第1章 css的盒子模型

1.1 了解css中的盒子模式

边框内部为内边距，边框外部为外边距

1.1 css的边框

<html>

<style type="text/css">

p{
    border-style: dotted;
    width: 100px;
    height: 100px;
}

</style>

<body style="background:pink;">

<p>小哥哥</p>

</body><em></em>
</html>

第二种：只显示上下的边框，左右的边框不显示

width: 100px;

height: 100px;

border-top-style: dotted;

border-bottom-style: dashed;

}

还可以设置边框的宽度

width: 100px;

height: 100px;

border-top-style: dotted;

border-bottom-style: dashed;

border-width: 10px;

}

运行效果

1.1 css的内边距

padding是用来设置内边距的，

给span添加一个10px的内边距

<html>

<style type="text/css">

span{

    border-style: dotted;
    border-color: red;
    border-width: 2px;
    padding: 10px;
}

</style>

<body style="background:pink;">

<span>您好，努力奋斗</span>

</body><em></em>
</html>

运行效果如下：

1.1 css的外边距

首先创建一个未添加外边距的span

<html>

<style type="text/css">
*{
    padding: 0px;
    margin: 0px;
}

</style>

<body style="background:pink;">

<span>您好，努力奋斗</span>

</body><em></em>
</html>

未加外边距的运行效果如下所示：

接下来我们给span添加一个边框，设置外边距

}

span{

border-style: dotted;

border-width: 2px;

border-color: red;

margin: 20px 20px 20px 20px;

}

第1章 css的定位

1.1 css的定位概述

1.1 css的相对定位

接下来我们给div设置一个相对的定位

<html>

<style type="text/css">
*{
    padding: 0px;
    margin: 0px;
}
div{

    width: 100px;
    height: 100px;
    border-style: dotted;
    border-width:2px;
    border-color: red;
    position: relative;
    top: 20px;
    left: 20px;
}


</style>

<body style="background:pink;">

<div>小哥哥</div>

</body><em></em>
</html>

Span想对于父元素左上角有个偏移

1.1 css的绝对定位

决定定位是想对于父亲元素来进行绝对定位的，现在创建两个div1和div2，div1包涵div2，div2通过绝对定位来设置其相当于div1的位置、

未设置绝对定位

<html>

<style type="text/css">
*{
    padding: 0px;
    margin: 0px;
}

#div1{

    width: 400px;
    height: 400px;
    background-color: red;
    position: relative;
    top: 20px;
    left: 20px;
    border-style: dotted;
    border-width: 2px;
    border-color: blue;
}
#div2{

    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
    border-style: dotted;
    border-width: 2px;
    border-color: red;
}


</style>

<body style="background:pink;">

<div id="div1">
   <div id="div2"></div>
</div>

</body><em></em>
</html>

程序运行的效果是：

现在设置div2想对于div1，top和left偏移20px

#div2{

width: 200px;

height: 200px;

background-color: blue;

position: relative;

border-style: dotted;

border-width: 2px;

border-color: red;

position: absolute;

top: 20px;

left: 20px;

}

1.1 css中的浮动

第1章 css的高级实战

1.1 css的实战布局1

1.2 css的实战布局2

1.3 css的实战布局3

1.4 后序

posted on 2018-10-23 11:21 luzhouxiaoshuai 阅读(197) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

luzhouxiaoshuai

css样式学习笔记

第1章 ：css快速入门

1.1 什么是css

1.2 css的三种引入形式

1.1 css的基础语法

1.1 css的基础选择器

1.1 派生选择器和属性选择器

第1章 css中的常见样式

1.1 css中的文本控制

1.1 css中的字体控制

1.1 css中的背景控制

1.1 css中的列表控制

1.1 css中的链表控制

1.1 css中的表格控制

1.1 css中的常见伪元素

第1章 css的盒子模型

1.1 了解css中的盒子模式

1.1 css的边框

1.1 css的内边距

1.1 css的外边距

第1章 css的定位

1.1 css的定位概述

1.1 css的相对定位

1.1 css的绝对定位

1.1 css中的浮动

第1章 css的高级实战

1.1 css的实战布局1

1.2 css的实战布局2

1.3 css的实战布局3

1.4 后序

导航

公告

统计

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

第1章：css快速入门