一、 css初识

1、互联网前三层

HTML 从语义的角度描述页面的结构

CSS 从审美的角度描述页面的样式

JS 从交互的角度描述页面的行为

2、 css

cascading style sheet 层叠样式表

二、在HTML里面引入css的几种方式

1、外部引入式

@charset "UTF-8";

div {

    width:100px;

    height: 100px;

    color: red;

}

引入代码:
<link rel="stylesheet" href="../css/demoStyle.css">

2、文档内嵌式

<style>

    div {

        font-size: 90px;

    }

</style>

3、行内式（元素内嵌式）

<div style="color: green;width: 200px;font-size: 30px">

    我是一个盒子

</div>

三、选择器

1、标签选择器

/*01、标签选择器只可以描述共性没有办法描述个性*/

p {

    color: red;

}

2、 id选择器

 #p2 {

        }

    </style>

</head>

<body>

 <div>

     <p>我是段落1</p>

     <p>我是段落2</p>

     <p id="p1">我是段落3</p>

 </div>

<div>

    <p>我是段落4</p>

    <p>我是段落5</p>

    <p id="p2">我是段落6</p>

</div>

特点：

　　01、id选择器在页面里面不能重名

02、可以给页面里面的任一元素命名

03、对应的选择符号是 #

命名方式:

01：必须以字母开头不能够以数字开头

02、不能和标签重名

03、命名要有意义

04、一定是英文

05、只能有字母数字下划线中间不要加空格

3、类选择器

.p2 {

            font-size: 60px;

        }

        .p3 {

            text-decoration: underline;

            color: greenyellow;

            font-size: 10px;

        }

    </style>

</head>

<body>

 <div>

     <p>我是段落1</p>

     <p class="p2">我是段落2</p>

     <p id="p1">我是段落3</p>

 </div>

<div>

    <p>我是段落4</p>

    <p class="p3 p2">我是段落5</p>

特点：

01、类名可以重复

02、可以给页面上面任一标签命名

03、选择符是个点（.）（这里是个点）

04、一个标签可以同时属于多个类

类上样式 ID 上行为

4、通配符（*）

* {

    color: blue;

    font-size: 30px;

}

5、基础选择器的层级关系

层级关系： ID选择器>类选择器>标签选择器>通配符

 <style>

        #d2 {

            color: orange;

            font-size: 50px;

        }

        .d1{

            color: green;

            font-size: 30px;

        }

        p {

            color: red;

        }

        * {

            /**/

            color: purple;

        }

    </style>

</head>

<body>

  <!--<div class="box">-->

    <!---->

  <!--</div>-->

<!--div.box-->

<!--div.box-->

<!--.box-->

<div class="box">

    <p class="d1" id="d2">我是段落1</p>

    <p>我是段落2</p>

    <p class="d1">我是段落3</p>

    <p >我是段落4</p>

</div>

</body>

6、后代选择器

.d3 p{

    color: aquamarine;

    font-size: 30px;

}

特点：

01、后代选择器描述的是一种共性一种平衡

02、当要把某个元素下面的所有后代元素添加样式的时候可以用后代选择器

03、后代选择器中间有空格

7、交集选择器

特点：

01、选择的是有个h1标签起了一个 title1的别名描述的一种元素不存在任何层级关系

h1.title1 {

    text-decoration: underline;

}

02、交集选择器中间没有空格

8、并集选择器

li,p,span {

    color: #ff1e08;

    font-size: 30px;

}

特点：

01、并集选择器选择两者或两者以上的元素

02、写法上中间有逗号

四、盒模型

1、盒模型的5个基本的属性

01、宽度：width 指的是内容区域的宽度

02、高度：height指的是内容区域的高度

03、内边距：padding

001、padding后面一个参数代表四个方向都是40px

padding: 40px;

002、padding后面两个参数代表上为40px 左右为20px 下为30px

padding: 40px 20px 30px;

003、padding后面三个参数代表上下为40px 左右为20px

004、padding后面四个参数代表上为40px 右为20px

下为30px 左为10px (上右下左四个方向 )

padding: 40px 20px 30px 10px;

005、分方向写padding

padding-top: 10px;

padding-right:30px;

padding-bottom:40px;

padding-left:20px;

04、边框：border

Border：粗细线形颜色

border:1px solid blue;

border-top:10px solid red ;

 border-right:20px dotted yellow;

 border-bottom:10px double purple;

 border-left:15px dashed green;

05、外边距：margin

使网页在浏览器窗口中居中

<style>

        .box {

            width: 600px;

            height: 400px;

            padding: 30px;

            border:2px dashed red;

            margin: 30px auto;

        }

    </style>

</head>

<body>

<div class="box">

    我是一个页面

</div>

</body>

五、标准文档流

标准文档流里面的微观现象

1、空白折叠现象

如果元素之间的空格超过一个以上则在页面里面显示的时候元素中间只会有一个空格产生想去掉这个空格则需要连起来写

2、高矮不齐底边对齐

3、自动换行一行写不满换行写

4、 Css里面的标签分类

01、HTML 标签分类

容器级元素: h1~H6 DIV ul li ol li dl dt dd

文本级元素：p img a I b u span strong em del

02、 css标签分类

块级元素: h1~H6 DIV ul li ol li dl dt dd p

-01、块级元素独自霸占一行不和其他任何元素并列显示

-02、可以接受宽和高

-03、如果不给块级元素加宽度那么他的宽度会变成父亲的100%

-04、

<style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            height: 300px;

        }

        /*p {*/

            /*background-color: green;*/

        /*}*/

    </style>

</head>

<body>

<div>

    <p>我</p>

</div>

行内元素: img a I b u span strong em del

-01、不可以接受宽和高

-02、行内元素可以和其他的行内元素并列显示

<style>

        * {

            padding: 0;

            margin: 0;

        }

        p {

            width: 200px;

            height: 200px;

            color: white;

            /*显示模式*/

            /*inline代表行内*/

            /*将块级转为行内*/

            display:inline;

        }

        span {

            /*将行内转为块级*/

            display: block;

            width: 200px;

            height: 200px;

            background-color: green;

            color: #fff;

        }

    </style>

</head>

<body>

   <p>我</p>

   <p>是</p>

   <p>块</p>

   <p>级</p>

   <span>我</span>

   <span>是</span>

   <span>行</span>

   <span>内</span>

</body>

案例单击按钮图片显隐

<body>

<input type="button" value="点击我" id="btn">

<br>

<img src="imgs/2.jpg" alt="" id="pic">

<script>

    var btn =document.getElementById("btn");

    var pic =document.getElementById("pic");

    var sta=1;

    btn.onclick= function fun(){

        if(sta==1){

            pic.style.display="none";

            sta=2;

        }else if(sta==2){

            pic.style.display="block";

            sta=1;

        }

    }

</script>

标准文档流里面有很多的规则很多性质

如果我们想让元素在一行上面显示的同时还可以设置宽和高的话就要脱离文档标准流

CSS里面脱离文档标准流的几个方式

01、浮动

02、绝对定位

03、固定定位

六、浮动

性质1、浮动的元素脱离文档标准流

<style>

        * {

            padding: 0;

            margin: 0;

        }

        .box1{

            width: 400px;

            height: 400px;

        }

        .box2{

            width: 400px;

            height: 400px;

            background-color: green;

            float: left;

        }

        .box3{

            width: 450px;

            height: 450px;

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

性质2 ：浮动的元素互相贴靠

<style>

        * {

            padding: 0;

            margin: 0;

        }

        .monkey {

            float: left;

            width: 150px;

            height: 250px;

        }

        .pig {

            float: left;

            width: 300px;

            height: 200px;

            background-color: pink;

        }

        .fish {

            float: left;

            width: 100px;

            height: 400px;

            background-color: purple;

        }

    </style>

</head>

<body>

<div class="monkey">孙猴子</div>

<div class="pig">猪八戒</div>

<div class="fish">沙和尚</div>

性质3：字围效果

<style>

        * {

            padding: 0;

            margin: 0;

        }

        p {

            float: left;

            width: 300px;

            height: 500px;

            background-color: pink;

        }

        div {

            width: 900px;

            height: 900px;

            background-color: green;

            color: #fff;

        }

    </style>

</head>

<body>

    <p></p>

    <div>

        00000000000000000000000《假如今天是我生命中的最后一天……》  假如今天是我生命中的最后一天。  我要如何利用这最后、最宝贵的一天呢？首先，我要把一天的时间珍藏好，不让一分一秒的时间滴漏。我不为昨日的不幸叹息，过去的已够不幸，不要再陪上今日的运道。

</div>

(注：非原创，源作者：刘祥）

CSS学习笔记_day2的更多相关文章

CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u ...
HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

网页链接跳转qq聊天界面以及QQ群是什么实现的
网页可以唤起QQ群,这我们都知道可以做到,那如何唤起呢?下面就做一个简单的介绍,希望可以帮助到有需要的朋友 1.官方提供的几种加群的链接官方的加群代码的获取前提是我们具有权限(也就是群主或管理权限) ...
基于DES加密的服务端分析
此程序建立了一个TCP服务端,端口号为10010,之后accept等待连接,如果接受到连接,那么就发送一些欢迎信息,以及提示信息---发送quit退出. 之后不停地调用recv,如果接受到数据,那么判 ...
使用Python+turtle绘制动画重现龟兔赛跑现场
问题描述: 在经典的龟兔赛跑故事中,兔子本来是遥遥领先的,结果因为骄傲,居然在比赛现场睡了一觉,醒来后发现乌龟已经快到终点了,于是赶紧追赶,无奈为时已晚,最终输掉了比赛.本文使用turtle绘制乌龟和 ...
spoj mpoint
题解: 判断每一次加进来的时候有几个被破坏,几个添加然后单调栈维护代码: #include<bits/stdc++.h> using namespace std; ; ,now,oo= ...
HIbernate常见异常（转载）
SSH阶段常见的异常系列之一hibernate(15条) 异常一异常一异常描述: Sax解析异常:cvc-复杂的类型,发现了以元素maping开头的无效内容,应该是以 ‘{“http://www. ...
django中的Q查询
转载于:https://mozillazg.com/2015/11/django-the-power-of-q-objects-and-how-to-use-q-object.html 原文写的很详细 ...
JavaScript js 引入CDN 不生效注意事项
[博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708]https ...
C# Vs2017启动调试，debug或者release调试状态闪一下程序就独立运行了
最近发现一个没太大影响但是很奇怪的事情,编辑状态下点击调试,发现和之前的项目不一样,调试状态闪一下,程序就“独立了”,不受调试状态的控制了. 找了半天才发现,是在program.cs里加了一段代码引起 ...
LeetCode 145 二叉树的后序遍历（非递归）
题目: 给定一个二叉树,返回它的后序遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [3,2,1] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 解题思路: 1 ...
分布式大数据系统离线分析技术解决方案(spark2.x)
一.sark2.x新型的架构系统

CSS学习笔记_day2

目录

一、 css初识

1、互联网前三层

2、 css

二、在HTML里面引入css的几种方式

1、外部引入式

2、文档内嵌式

3、行内式（元素内嵌式）

三、选择器

1、标签选择器

2、 id选择器

3、类选择器

4、通配符（*）

5、基础选择器的层级关系

6、后代选择器

7、交集选择器

8、并集选择器

四、盒模型

1、盒模型的5个基本的属性

五、标准文档流

1、空白折叠现象

2、高矮不齐底边对齐

3、自动换行一行写不满换行写

4、 Css里面的标签分类

六、浮动

CSS学习笔记_day2的更多相关文章

随机推荐

热门专题

CSS学习笔记_day2

目录

一、 css初识

1、 互联网前三层

2、 css

二、 在HTML里面引入css的几种方式

1、 外部引入式

2、文档内嵌式

3、 行内式（元素内嵌式）

三、 选择器

1、 标签选择器

2、 id选择器

3、 类选择器

4、 通配符（*）

5、基础选择器的层级关系

6、后代选择器

7、交集选择器

8、并集选择器

四、盒模型

1、盒模型的5个基本的属性

五、标准文档流

1、 空白折叠现象

2、 高矮不齐 底边对齐

3、 自动换行 一行写不满 换行写

4、 Css里面的标签分类

六、浮动

CSS学习笔记_day2的更多相关文章

随机推荐

热门专题

1、互联网前三层

二、在HTML里面引入css的几种方式

1、外部引入式

3、行内式（元素内嵌式）

三、选择器

1、标签选择器

3、类选择器

4、通配符（*）

1、空白折叠现象

2、高矮不齐底边对齐

3、自动换行一行写不满换行写