视频参见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 后序

css样式学习笔记的更多相关文章

html之CSS样式学习笔记
本文内容: 字体样式文本样式背景样式尺寸样式盒子模型边框样式边距样式浮动布局定位布局 [CSS3]伸缩布局标签显示方式列表样式 [CSS3]过渡样式 [CSS3]变换样式之2D变形 ...
CSS样式学习笔记『W3School』
1.选择器+声明声明:属性+值eg:h1{color:red;font-size:14px;}颜色:p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0 ...
css居中学习笔记
css居中学习笔记一.水平居中以下面的代码为例: <body> <div class="parent"> <div class="chi ...
CSS 3 学习笔记
css 3 学习笔记文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
（2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
HTML&CSS基础学习笔记1.29-灵活地使用样式
灵活的使用样式使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
HTML&CSS基础学习笔记1.12—引入样式表
引入样式表我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...

随机推荐

jQuery 获取页面宽高
无滚动条的情况下(页面宽高比可视区域小):$(document)和$(window)的width.height方法获取的值都是一样的,都是可视区域的宽高即$(document).width()==$( ...
css 盒模型、box-sizing 学习笔记
默认情况下,给元素设置的高度和宽度是元素内容区的宽度和高度,给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式: 元素的宽度= 元素的内容区宽度 + 内边距宽度 ...
python argparse总结
python2.7废除optparse,原因:http://code.google.com/p/argparse/ 说了半天好像是重开了个小号练级抓紧写下来一会又得忘了用法: import arg ...
【Storm】编程模型
元祖(tuple) 元组(Tuple),是消息传递的基本单元,是一个命名的值列表,元组中的字段可以是任何类型的对象. Storm使用元组作为其数据模型,元组支持所有的基本类型.字符串和字节数组作为字 ...
css 段落文字换行问题
项目中遇到的一个小问题,以前没有注意到: 超链接超出父级元素,想着给a标签加宽度但是没有效果... 后来发现两个很好用的css属性 1.word-wrap 用来控制换行取值: (1)normal ...
Java实现蓝桥杯历届试题买不到的数目
历届试题买不到的数目时间限制:1.0s 内存限制:256.0MB 提交此题锦囊1 锦囊2 问题描述小明开了一家糖果店.他别出心裁:把水果糖包成4颗一包和7颗一包的两种.糖果不能拆包卖. 小朋友 ...
Java实现 LeetCode 655 输出二叉树（DFS+二分）
655. 输出二叉树在一个 m*n 的二维字符串数组中输出二叉树,并遵守以下规则: 行数 m 应当等于给定二叉树的高度. 列数 n 应当总是奇数. 根节点的值(以字符串格式给出)应当放在可放置的第一 ...
Java实现LeetCode_0026_RemoveDuplicatesFromSortedArray
package javaLeetCode.primary; public class RemoveDuplicatesFromSortedArray_26 { public static void m ...
Java实现洛谷 P1909 买铅笔
import java.util.Arrays; import java.util.Scanner; public class Main { public static void main(Strin ...
java实现连续数的公倍数
为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字,它的因子比较多. 事实上,它是1至6的每个数字的倍数.即1,2,3,4,5,6都是可以除尽6 ...

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 后序

css样式学习笔记的更多相关文章

随机推荐

热门专题

第1章：css快速入门