zoukankan html css js c++ java

CSS学习笔记_day2

一、 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; 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 指的是内容区域的宽度

max-width：对于小窗口不会出现滚动条

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

03、内边距：padding

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

padding: 40px;

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

padding:40px 20px;

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

padding: 40px 20px 30px;

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

margin 属性设置为 auto，以使元素在其容器中水平居中。
外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

文字：

text-decoration: none 用于链接删除下划线

五、标准文档流

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

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、固定定位

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

查看全文

相关阅读:
四种访问权限修饰符在工作中的常见用法
 大数据(hadoop,hive,hbase,spark,flume等)各技术间的关系
 docker+dubbo的一些注意事项
 mysql的索引介绍
 基于dubbo的微服务的自我看法
 Kubernetes(K8S)集群在centos7.4下创建
 自我反省一年多
 淘淘商城
 SpringMVC的随笔3
ARM(LS1046A)模块及XC7Z045模块调试记录

原文地址：https://www.cnblogs.com/zhuomoyixia/p/9291722.html

CSS学习笔记_day2

目录

一、 css初识

1、 互联网前三层

2、 css

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

1、 外部引入式