正文

CSS学习笔记_day2

IP云
IP云V管理员/0 阅读
11/25
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

目录

一、 css初识

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

1、 外部引入式

2、文档内嵌式

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

三、 选择器

四、 盒模型

五、文档标准流

六、浮动

一、 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: 40 px ;

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

padding: 40 px 20 px 30 px ;

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

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

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

padding: 40 px 20 px 30 px 10 px ;

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>

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

相关阅读

目录[+]