重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
CSS(Cascading Style Sheets)
创新互联是一家专业提供修水企业网站建设,专注与网站制作、网站建设、H5页面制作、小程序制作等业务。10年已为修水众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
层叠样式表
优势:
CSS可以提高页面的浏览速度。
缩短改版时间,降低维护费用。
强大的字体控制能力和排版能力。
css容易编写。
可以一次设计随处发布。
更好的控制页面布局。
实现表现和结构、内容相分离。
更方便搜索引擎的搜索/page Rank
样式规则:
语法:选择器{属性1:值1;属性2:值2;...属性N:值N;}
选择器就是要改变页面中的哪些标签元素
声明要用{}括起来,;结束
如果属性中包含空格要用“”括起来
可以指定多个选择器使用相同的样式
样式表:
外部样式表,新建.css文件,在文件中写入样式规则link rel="stylesheet" href = "xxx.css"
内联样式表,在元素中添加style属性
嵌入式样式表,在html使用style标签,style type="text/css"/style
选择器:
元素选择器,元素名
id选择器,用#id
类选择器,用.class
后代选择器,选择器1 选择器2
css深化:
就近原则,!important提高元素优先级,伪类选择器,伪对象选择器,@import导入其他css文件,响应式布局可以解决多设备的兼容问题。
文本属性:
font-family:字体
font-size:字体大小
font-style:斜体
font-weight:粗体
color:颜色
line-height:行高
letter-spacing:字符间距
text-decoration:文本修饰
text-overflow:文字溢出处理
white-space : no wrap
text-overflow:hidden
text-align:文本对齐
背景属性:
background-color:背景颜色
background-image:背景图片
background-repeat:背景重复
background-attachment:背景图片附着
基于占满一整行与否,标签分为两大类(文档流):
占满:行级元素(div,p,h1~h6)
不占满:行内元素(span,)
定位属性:
position:定位
absolute:绝对定位
relative:相对定位
层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
1. 开发者样式读者样式浏览器样式(除非使用!important标记 )
2. id选择符(伪)类选择符元素选择符
3. 权重相同时取后面定义的样式
以下是一段经典的html,三个类名分别为模块、标题和正文。
div class="mod"
div class="hd"/div
div class="bd"/div
/div
大部分html页面都可以由这种结构嵌套或者累加而成。
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
*CSS是Cascading Style Sheets(层叠样式表)的简称.
* CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
* 在标准网页设计中CSS负责网页内容(XHTML)的表现.
* CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
* 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
* CSS是由W3C的CSS工作组产生和维护的.
层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.
css之所以有“层叠”的概念,是因为有多个样式来源。
其中css样式来源有5个,分别是内联样式(a style=""),内部样式(style/style),
外部样式(写在css文件中的样式),浏览器用户自定义样式,浏览器默认样式;
按照其来源优先级为内联样式内部样式外部样式浏览器用户自定义样式浏览器默认样式
按照选择器优先级为id class元素选择器
如果有important,important优先级最高。