学习笔记-《零基础学习HTML5—html+css基础 》4.CSS基础样式(上)

原创 2016年08月31日 12:53:35

1.div 双标签

        语义:无意义

        它不是任何东西的缩写,它的作用就是来划分区域


2.css的语法

       属性名:属性值;

<div style="height:100px;width:200px;background:yellow;">我是身体</div>


3.css的引入方式

style="height:100px;width:200px;background:yellow


(1)行间样式的引入

          写法:在标签中,写一个style的属性,比如:style="......."在引号当中,写相应的css样式

                 <div style="height:100px;width:200px;background:yellow;">我是身体</div>

                缺点: 当描述的样式很多时,这种会累死,别外不利于维护

                优点:优先级最高

(2)内部样式表的的引入

         写法:在head标签里,写一个style的标签,通过选择器来控制样式

选择器?    div{  }

这个div和之前的div完全不一样,之前的是标签,这个是选择器

        标签名选择器

                 写法:

                         div{

                                  ........  css的样式

                               }


         ID选择器

                   写法:首先在相应标签中设置词一个ID的属性

                               如:id="id名“

                               在样式表中,通过

                           # + id名 {

                              .........css的样式

                                }

温馨小提示:

id名要以英文字母开头,不能用数字或汉字开头

id名不能重复,是唯一的

       

                  class选择器

                   写法:首先在相应标签中设置词一个class的属性

                               如:class="class名“

                               在样式表中,通过

                           . + class名 {

                              .........css的样式

                                }

温馨小提示:

class名要以英文字母开头,不能用数字或汉字开头

class名能重复,不是唯一的


4.优先级

标签名选择器 < class选择器  <  ID选择器  < 行间样式


(3)外部样式表的的引入


HTML5学习笔记之二CSS基础

一般来说,CSS都存储为一个文件,然后各个html page可以指定shiyo
  • windhoo
  • windhoo
  • 2014年06月05日 22:24
  • 765

蓝鸥零基础学习HTML5之CSS的基础样式二

蓝鸥零基础学习HTML5第四讲 CSS的基础样式二

蓝鸥零基础学习HTML5之CSS的基础样式一

蓝鸥零基础学习HTML5之CSS的基础样式

【HTML5学习笔记】12:尝试CSS层叠样式表和关键帧

跟着视频写的的3D隧道,用了CSS样式。建立了几个div块,用CSS改变了它的形状,然后添加关键帧使它朝着Y轴周期性移动,就形成了3D隧道的效果。 *测试代码 3D隧道 ...

【HTML5学习笔记】19:CSS文本样式 上

本节学习CSS中通过文本样式的设置,来更改字体样式等。 font-size用来设置字体大小。 ①直接用数字+px表示多少像素。②用一个层级值xx-small,x-small,small,med...

在慕课上学习的,HTML和CSS基础学习笔记4

6、CSS,为网页添加样式 6-1 认识css CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字...

HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)

代码如下: .box { /* .box 默认样式 */ margin: 200px 0 0 200...

HTML5基础加强css样式篇(target目标伪类选择器应用)(十)

1.静态界面 Title html body{ margin: 0px; padding: 0px;...

HTML5基础加强css样式篇(文本裁剪,背景裁剪:background-origin,background-position,background-clip)(三十七)

1.背景定位: .box { /* .box 默认样式 */ margin: 200px 0 0 ...

HTML5基础加强css样式篇(伸缩容器子元素属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self)(五十四)

1
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习笔记-《零基础学习HTML5—html+css基础 》4.CSS基础样式(上)
举报原因:
原因补充:

(最多只允许输入30个字)