2017/2/22 学习css的第一天

时间:2022-02-02 19:19:03
CSS 层叠式样式表


页面布局+修饰


1、优点


修改简单


可以独立存在(多个页面可以同时使用)


2、分类


(1)浏览器缺省设置(默认)


(2)内联样式(作用于当前标记)


(3)内部样式表(作用于当前页面)


(4)外部样式表(作用于整个网站)


3、内联样式


<!-- <p style="属性1:属性值1;属性2:属性值2" >天猫</p> -->


字体样式:


颜色:color:red


字号大小:font-size:12px;    px像素单位


多个属性用分号;隔开


谷歌浏览器最小的字号为12px  每个浏览器的最小字号都不一样


4、内部样式


<!-- <head>
<style type="text/css">
  选择器{属性:属性值;}
  span{color:#ff0000;font-size:25px;}
</style>
</head> -->


<!-- <span>天猫</span> -->


选择器


(1)标记选择器


   标记名称{属性:属性值;}


(2)类选择器


<!-- <head>
<style type="text/css">
  .tmall{属性:属性值;}
  .amlls{color:#ff0000;font-size:25px;}
</style>
</head> -->


   <!-- <span class="tmall">天猫</span> -->
   <!-- <span class="taobao">淘宝</span> -->


class=""  命名规则:首个字符不能为数字;首个字符
可以是连接符(-),下划线(_),其他的符号都不行


菜单:menu
导航:nav
头部:top
底部:footer
新闻列表:news_list
新闻详情:news_info
内容:content


class="" 类可以有多个(优先读取的是样式表下面的类样式)


/* 注释 */


(3)ID选择器


  #tm{color:#ffffff;}


单纯的css中,id名可以重复(不推荐在css中使用)


id主要用于js ; jquery。


 js ; jquery中 id名称不能重复


选择器的优先级比较


标记选择器  小于  类选择器  小于  ID选择器


5、外部样式


(1)新建外部样式表  .css后缀改变


@charset"utf-8";


标记名称{属性1:值;属性2:值;}


中间不需要再加上<style></style>了,直接写样式


  选择器{属性:属性值;}


(2)引入外部样式表


<!-- <link rel="stylesheet" href="index.css" type="text/css" /> -->


同一个外部样表可以嵌入多个页面;同一个页面可以引入多个外部样式表


各个排版样式的优先级


内联样式  大于  内部样式


内部样式  与  外部样式 (按照在html中的编写顺序来读取的)