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

随机推荐

怎么让html中还是显示<button> 而不进行编译
toTXT(str) { var RexStr = /\<|\>|\"|\'|\&| | /g str = str.replace(RexStr, ...
CentOS7系统上的GPSTK示例代码调试 & 运行结果 & 心得
下载的源码程序包中,共有16个例子,这里记录它们的调试及运行结果,尤其是哪些可用,哪些不可用,今后使用时用作参考. 总结: (1)在 18 个示例程序中,example16 和 example17 编 ...
maven作用
1.控制项目间依赖关系方案 A项目依赖B项目的某些功能.将B项目打包为jar,并在A项目的Library下导入B的jar文件. 这样做有着很明显的缺点: 1.如果在开发过程中,发现B中的 ...
MATLAB绘图hist
刚登上号,已经学了一半了,就从现在开始写吧以前学过的东西老忘,所以就注册个账号就当做记笔记吧 MATLAB在原来的数组中增加新行 A=[A;B]%B是要增加的行: hist使用方法 y=4*rand ...
Property Exercise
要求一:自定义用户信息数据结构,写入文件,然后读出内容,利用eval重新获取数据结构 3 with open('user.db','w') as write_file:#创建并以写入的方式打开一个文件 ...
Oracle 11g 单实例到单实例OGG同步实施文档-OGG initial load
Oracle 11g 单实例到单实例OGG同步实施文档-OGG initial load 2018-06-07 00:514730原创GoldenGate 作者: leo 本文链接:https://w ...
vue 特点
1.双向绑定 v-model 2.组件化页面扩展单文件组件 js css html 都在一个文件中好处:前端组件化的突破性设计 scoped限制css的渲染,防止污染 lang 定义预处理器 ...
php不用正则表达式实现身份证号验证详解
写了一个身份证号验证类,php小白,写的不好,欢迎各位大神给我多提意见和建议身份证号分为四部分,第一部分是前6位为地址码,7-14位是出生日期,15-17位是同一地方同一天出生的男孩为奇数,女孩是偶 ...
Spark在StandAlone模式下提交任务，spark.rpc.message.maxSize太小而出错
1.错误信息org.apache.spark.SparkException: Job aborted due to stage failure:Serialized task 32:5 was 172 ...
sql在所有存储过程中查询包含某字符串的执行语句
直接在查询分析器中执行以下代码就行: 方法一) select name from sysobjects o, syscomments s where o.id = s.id and text like ...

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