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

随机推荐

HTML5离线存储的工作原理和使用
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...
MySQL— 索引，视图，触发器，函数，存储过程，执行计划，慢日志，分页性能
一.索引,分页性能,执行计划,慢日志 (1)索引的种类,创建语句,名词补充(最左前缀匹配,覆盖索引,索引合并,局部索引等): import sys # http://www.cnblogs.com/w ...
阿里推荐的线程使用方法 ThreadPoolExecutor
阿里推荐原因:使用线程池可以减少创建和销毁线程上所花的时间以及系统资源的开销,然后之所以不用Executors自定义线程池,用ThreadPoolExecutor是为了规范线程池的使用,还有让其他人更 ...
keeplived
keepalived高可用集群. keepalived故障切换转移原理1vrrp协议:(vritual router redundancy protocol)虚拟路由冗余协议,2故障转移.keep ...
第三章熟悉常用的HDFS操作
一.Hadoop提供的Shell命令完成相同任务: 1.在本地Linux文件系统的“/home/hadoop/”目录下创建一个文件txt,里面可以随意输入一些单词. mkdir hadoop 在本地查 ...
记一次用express手写博客
1.req.session时一直是undefined 解决方法: // sesssion应用的配置 app.use(session({ secret:'blog', cookie: ('name', ...
iptables介绍
iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables. iptables的结构:iptables-->Tables-->Chai ...
第4次作业 -- 基于Jenkins的持续集成
Jenkins 配置使用心得先在 https://jenkins.io/download/ 下载Jenkins 下载之后安装,在指定的地方找到了初始密码,安装了一些插件之后,Jenkins就可以使用 ...
用几句话说一说CMake add_dependencies & target_link_libraries的使用区别
简单说一说前两天学习使用CMake解决链接问题时遇到的一个问题. 对于编译时遇到的依赖问题,很多时候我们只需要一句target_link_libraries就可以搞定. 但是CMake还有另外一个co ...
redis的特点
一.Redis 特点 1.Redis 是一个基于内存的高性能key-value数据库, 2.Redis最大的魅力是支持保存多种数据结构,此外单个value的最大限制是1GB,不像 memcached只 ...

CSS学习笔记_day2

目录

一、 css初识

1、 互联网前三层

2、 css

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

1、 外部引入式