视频参见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样式链入页面的作用. < ...

随机推荐

JSP指令 & 中文乱码问题
1. JSP 指令: JSP指令(directive)是为JSP引擎而设计的, 它们并不直接产生任何可见输出, 而只是告诉引擎如何处理JSP页面中的其余部分. 2. 在JSP 2.0中,定义了 ...
Python数据科学利器
每个工具都带有用来创造它的那种精神. -- 海森堡<物理学和哲学> Anaconda Anaconda是一个python的科学计算发行版,其附带了一大批常用的数据科学包,不用再使用pip安 ...
FHQ-Treap学习笔记
平衡树与FHQ-Treap 平衡树(即平衡二叉搜索树),是通过一系列玄学操作让二叉搜索树(BST)处于较平衡的状态,防止在某些数据下退化(BST在插入值单调时,树形不平衡,单次会退化成 \(\math ...
此flash player与您的地区不相容——更换新版本edge后出现的问题
最新切换到了edge浏览器,使用flash时提示:"此flash player与您的地区不相容",而chrome是没有问题的.网上找到解决方案,发现一个可以有效解决的方式,如下: ...
一、Redis 总结
官网 Redis 介绍 Redis 是一个开源的.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的 API. Redis 是一个 key-value 存储系统.为了 ...
K-means聚类分析
一.原理先确定簇的个数,K 假设每个簇都有一个中心点 centroid 将每个样本点划分到距离它最近的中心点所属的簇中选择K个点做为初始的中心点 while() { 将所有点分配个K个中心点形成K ...
Rocket - diplomacy - AddressAdjuster
https://mp.weixin.qq.com/s/X0s5CWN84GEiwpNR7tiRgA 基于AddressAdjuster介绍LazyModule的实现. 参考链接:https://g ...
面试题： SpringBoot 的自启动原理
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 引言不论在工作中,亦或是求职面试,Spring Boot 已经成为我们必知必会的技能项.除了比较老旧的 ...
Java实现 LeetCode 268 缺失数字
268. 缺失数字给定一个包含 0, 1, 2, -, n 中 n 个数的序列,找出 0 - n 中没有出现在序列中的那个数. 示例 1: 输入: [3,0,1] 输出: 2 示例 2: 输入: [ ...
Java实现 LeetCode 237 删除链表中的节点
237. 删除链表中的节点请编写一个函数,使其可以删除某个链表中给定的(非末尾)节点,你将只被给定要求被删除的节点. 现有一个链表 – head = [4,5,1,9],它可以表示为: 示例 1: ...

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快速入门