一、 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:腾讯软件中心静态页面制作( ...

随机推荐

unity3d 孤岛求生基础案例
第二个案例,此案例主要实现了第一人称控制器,把移动从世界坐标系转化到人物平面坐标系,通过碰撞器,触发器,光线透射触发器实现交互.实现UI texture记录收集信息,ui texture是更新内容对应 ...
绕过/&ast;,web&period;xml直接访问jsp
web.xml中如果配置了/* 全匹配,那么不能用servet去响应页面返回了,因为全都被会/*拦截. <servlet> <servlet-name>validateAuth ...
POJ3659 Cell Phone Network（树上最小支配集：树型DP）
题目求一棵树的最小支配数. 支配集,即把图的点分成两个集合,所有非支配集内的点都和支配集内的某一点相邻. 听说即使是二分图,最小支配集的求解也是还没多项式算法的.而树上求最小支配集树型DP就OK了. ...
oc常见误区
1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然 ...
获得树形json串
public class TreeNode { private long nodeId; private String nodeName; private long fatherNod ...
flask简单web应用
推荐一个学习python的网站,个人觉得在这里面收获挺大的,希望对后来学习flask的小伙伴们有帮助.http://www.pythondoc.com/ 用flask框架实现第一个web应用首先需要 ...
201521123048 《Java程序设计》第1周学习总结
一本周学习总结第一周我们了解了java及其它的由来.刚开始学java显的特别吃力,对于一些概念和程序执行步骤什么的都不好理解,也有很多在编程时容易出错的地方需要花时间理解和记忆.初步一周下来,在我 ...
洛谷P1415 拆分数列（dp）
题目链接:传送门题目: 题目背景 [为了响应党*勤节俭.反铺张的精神,题目背景描述故事部分略去^-^] 题目描述给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输 ...
如何回收vRealize Automation里被分配出去了的IP地址
在vRealize里写代码部署虚机,时间长了,便出现了很多虚机在vCenter里不存在,但在vRealize里还存在的这台虚机的注册信息的现象.最直接的后果是,这些影子虚机会占着IP池里的IP地址不放 ...
HDU1349 Minimum Inversion Number 2016-09-15 13&colon;04 75人阅读评论(0) 收藏
B - Minimum Inversion Number Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d &a ...

秒客网

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、自动换行一行写不满换行写