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

随机推荐

CVE-2017-9993 FFMpeg漏洞利用
漏洞原理: 更改连接直接发送请求,造成ssrf 漏洞利用: 脚本地址:https://github.com/neex/ffmpeg-avi-m3u-xbin 用法: 生成一个读取/etc/passwd ...
我眼中的华为公有云AI平台--ModelArts
前言 AWS Sagemaker has been a great deal for most data scientists who would want to accomplish a truly ...
ASP.NET通过更改Url进行页面传值
这里,通过假数据,手动创建的一个类,然后创建的一个集合,放入下拉框,选好值以后,点确定会在另一个页面产生对应的id,有不懂的欢迎评论创建一个类: using System; using Syste ...
Java实现蓝桥杯算法提高拿糖果
算法提高拿糖果时间限制:1.0s 内存限制:256.0MB 问题描述妈妈给小B买了N块糖!但是她不允许小B直接吃掉. 假设当前有M块糖,小B每次可以拿P块糖,其中P是M的一个不大于根号下M的质因 ...
Java实现 LeetCode 456 132模式
456. 132模式给定一个整数序列:a1, a2, -, an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj ...
Java实现 LeetCode 386 字典序排数
386. 字典序排数给定一个整数 n, 返回从 1 到 n 的字典顺序. 例如, 给定 n =1 3,返回 [1,10,11,12,13,2,3,4,5,6,7,8,9] . 请尽可能的优化算法的时 ...
Java实现蓝桥杯VIP 算法训练麦森数
算法训练麦森数时间限制:1.0s 内存限制:256.0MB 问题描述形如2P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2P-1不一定也是素数.到1998年底, ...
java实现第七届蓝桥杯阶乘位数
阶乘位数阶乘位数 9的阶乘等于:362880 它的二进制表示为:1011000100110000000 这个数字共有19位. 请你计算,9999 的阶乘的二进制表示一共有多少位? 注意:需要提交的是 ...
java代码（6） ---guava之multimap
guava之multimap 上一篇说的是Multiset它可以对存入的相同元素做一个计数的功能,那multimap呢? 一.概述 1.基本介绍和案例说明 multimap和Multiset的继承结果 ...
Python--函数&过程
函数式编程与过程式编程打的区分:过程是没有返回值的函数,过程在python3中也有返回值,为None 函数的作用:代码复用.保持代码的一致性.使代码更容易扩展过程的定义与调用: 1 def func ...

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