javaseday33(css基本概念选择样式)

来源：互联网发布：淘宝页面尺寸是多少编辑：程序博客网时间：2024/06/06 06:57

css 是层叠样式表 (Cascading Style Sheets)用来定义网页的显示效果可以解决html代码对样式定义的重复提高了后期样式代码的可维护性并增强了网页的显示效果功能简单一句话 css将网页内容和显示样式进行了分离提高了显示功能
那么css和html 如何在网页代码中相结合？

<!--写在head 先加载样式复用性强 但是body内自己特有的css样式会覆盖这里的  这叫样式的重叠--><style type="text/css">div{    background-color: #000;    color:#F00;} </style></head><body><!-- css和html结合的第一种方式1、每一个html标签中都有一个style样式属性 该属性的值就是css代码2、使用style标签的方式 一般都定义在head标签中--><div  style="background-color:#009">第一个div区域</div><div>第二个div区域</div>

四种方式：
1、style属性方式
利用标签中style属性来改变每个标签的显示样式

<p> style="background-color:#FF0000;color:#FFFFFF">p标签段落内容</p>该方式比较灵活 但是对于多个相同标签的同一样式定义比较麻烦 适合局部修改

2、style标签方式(内嵌方式)
在head标签中加入style标签对多个标签进行统一修改

<head>    <style type ="text/css">    p{color:#FF0000;}    </style>    </head>    该方式可以对单个页面的样式进行统一设置但对于局部不够灵活

3、导入方式

前提是已经存在一个定义好的css文件 网页的一部分样式 需要用到 那么就用这种方式<style type ="text/css">@import url(css_1.css);div{color:#FF0000;}<style>url括号后面必须要用封号结束 如果导入进来的样式与本页面定义的样式重复以本页定义样式为准

4、链接方式

通过head标签中link标签来实现 前提也要先有一个定好的css文件<link rel="stylesheet" type="text/css" href="css_1.css" media="screen"/>可以通过多个link标签链接进来多个css文件 重复样式以最后链接进来的css样式为准/* CSS Document *//*在该文件中导入其他css文件*/@import url(css01.css);@import url(span.css);

5、样式优先级
由上到下由外到内优先级由低到高后加载的为主以后的还有区别
6、总结css代码格式
选择器名称(属性名:属性值 ;属性名:属性值;…)
属性与属性之间用封号隔开
属性与属性值之间使用冒号连接
如果一个属性有多个值的话那么多个值用空格隔开
7、选择器
就是指定css要作用的标签那个标签的名称就是选择器意为选择哪个容器
选择器共有三种
1、html标签选择器使用的就是html的标签名
2、class选择器其实使用的标签中的class属性
3、id选择器其实使用的就是标签中的id属性
每一个标签都定义了class属性和id属性用于对标签进行标识方便对标签进行操作在定义的标签中多个标签的class属性值可以相同而id值要唯一因为javascript中经常用

8、class选择器
在标签中定义class属性并赋值通过标签名.class值对该标签进行样式设置
相同标签设置不同样式的时候用class进行区分
p.pclass_1{color:#FF0000;}
p.pclass_2{color:#0000FF;}
p.pclass_3{color:#00FF00;}
10、扩展选择器

1、关联选择器标签是可以嵌套的 要让相同标签中的不同标签显示不同样式就可以使用此 选择器p{color:#ff4422;}p b{color:#faaaa;}<p>p标签<b>方法</b>段落样式</p><p>p标签段落</p>2、组合选择器对多个不同选择器进行相同样式设置的时候应用此选择器p,div{color;}<p>p标签显示</p><div>div标签</div>多个不同选择器要用逗号隔开3、伪元素选择器其实就在html中预先定义好的一些选择器 称为伪元素 是因为css的术语格式：标签名:伪元素.类名 标签名.类名:伪元素 都可以a:link 超链接未点击状态a:visited 被访问后状态a:hover 光标移到超链接上的状态(未点击)a:active 点击超链接时的状态使用顺序 L-V-H-Ap:first-line 段落的第一行文本p:first-letter 段落的第一个字母:focus 具有焦点的元素 ie6浏览器不支持 在firefox中可以看到效果

<!--写在head 先加载样式复用性强 但是body内自己特有的css样式会覆盖这里的  这叫样式的重叠--><!--<link rel="stylesheet" href="css/1.css" type="text/css"/>--><style type="text/css">/*@import url(css/1.css);*//*div{    background-color:#009;    color:#009;}*//*类选择器*//*div.haha{    background-color:#CC0;    color:#C9C    }*/  /*haha的类 标签都这样式*//*.haha{    background-color:#CC0;    color:#C9C    }*//*预定义样式 实现多态加载 比如点个按钮就换样式*/ /*.hehe{    background-color:#993;    color:#036;    }*//*通常id的取值是唯一的 因为该属性除了给css使用还可以被js使用 id通常是为了去标识页面中一些特定区域使用  */   /*#qq{    background-color:#F00;    color:#9C0    }   *//*关联选择器 选择器中的选择器span a b img  *//*span b{    background-color:#00F;    color:#C36;}*//*组合选择器 对多种选择器进行相同样式定义*/.haha,span b{    color:#306;    background-color:#903;    }</style></head><body><!-- css和html结合的第一种方式1、每一个html标签中都有一个style样式属性 该属性的值就是css代码2、使用style标签的方式 一般都定义在head标签中优先级标签选择器<类选择器<id选择器<style属性--><div>第一个<b>div</b>区域</div><div class="haha">第二个div区域</div><span class="haha">第<b>一个span</b>区域</span><span id="qq">第二个span区域</span><p id="qq">段落一</p><p class="haha">段落二</p></body>

阅读全文

0 0

javaseday33(css基本概念 选择 样式)

javaseday33(css基本概念选择样式)