CSS样式介绍

1.CSS：CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表，CSS是配合HTML的，HTML主要负责页面的结构，CSS主要负责页面的美化

 

2.CSS基本语法：css的定义方法是 ：选择器 { 属性：值； 属性：值； 属性：值；}    选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值。属性和值之间用冒号，一个属性和值与下一个属性和值之间用分号，最后一个分号可以省略

eg:div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

 

3.css引入方式：css引入页面的方式有三种

内联式：通过标签的style属性，在标签上直接写样式，一般写在<head>标签里面

eg:<div style="width:100px; height:100px; background:red ">......</div>

 

嵌入式：通过style标签，在网页上创建嵌入的样式表

eg:<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

 

外链式：通过link标签，链接外部样式文件到页面中，即在外面新建一个css文件夹，然后在<head>标签中通过<link rel="stylesheet" href="css.css" />链接过来，不要写在<style></style>对标签中，用外部链接式写css不需要用到style对标签

eg:<link rel="stylesheet" type="text/css" href="css/main.css">

 

4. css选择器:根据获取页面中元素的不同，目前css选择器主要分为五类：基本选择器，组合选择器，伪类选择器，伪元素和属性选择器。

 

基本选择器  ：  基本选择器主要分为标签选择器，类选择器，ID选择器和通配选择器

（1）标签选择器是css中使用率最高的一类选择器，它直接引用HTML标签名称，也称为类型选择器，类型选择器规定了网页元素在页面中的显示样式。因此标签选择器可以快速，方便的控制页面标签的默认显示效果

（2）类选择器是以（.）前缀开头，然后跟随一个自定义的类名，对应于html中的class属性， 类选择器允许以一种独立于文档元素的方式来指定样式,该选择器可以单独使用，也可以与其他元素结合使用（如果把标签和类结合在一起来定义选择器，则可以限定类的使用范围，这样就可以指定该类仅适用于特定的标签范围内，这种做法也称为指定类选择器）

（3）ID选择器，是以（#）前缀开头，然后跟随一个自定义的ID名，对应于HTML中的ID属性（一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML框架元素的ID值都是唯一的）

（4）通配选择器，如果HTML所有元素都需要定义相同的样式，这时可选择通配选择器，通配选择器是固定的，用星号（*）表示

 

组合选择器：当把两个或者多个基本选择器组合在一起时，便形成了一个复杂的选择器，通过组合选择器可以精确匹配页面元素。主要包括：包含选择器，子选择器，相邻选择器，兄弟选择器，分组选择器。

（1）包含选择器：包含选择器通过空格标识符来表示，前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器

（2）子选择器：指定父元素所包含的子元素。子选择器使用尖角号(>)表示，子选择器只传给儿子，孙子和其他堂亲都不行

（3）相邻选择器：通过（+）分隔符进行定义，前后选择符的关系是兄弟关系。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻选择器

（4）兄弟选择器：通过（~）分隔符进行定义，其基本结构是第一选择器指定同级前置元素，后面的选择器指定其后同级所有匹配元素，前后选择符的关系是兄弟关系。简言之，就是查找某一个指定元素的后面的所有兄弟结点，而相邻选择器只能查找紧接的那一个兄弟结点

（5）分组选择器：通过（，）分隔符进行定义，其基本结构是第一个选择器指定匹配元素，后面的选择器指定另一个匹配元素，最后把前后选择器匹配的元素全部都取出来，通过分组选择器可以实现集体声明，将样式表中一致的css样式放在一起，然后通过逗号连接这些选择器，减少代码的书写量

 

属性选择器：属性选择器可以根据元素的属性及属性值来选择元素 

 

伪类选择器：伪类选择器用于向某些选择器添加特殊的效果,包含伪类和伪对象选择器，伪选择器以冒号（：）作为前缀标识符，冒号前可以添加选择符，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格，否则将错认为类选择器。伪类选择器主要包括4种：动态伪类，结构伪类，否定伪类和状态伪类

（1）动态伪类：动态伪类是行为类样式，这些伪类并不存在于HTML中，只有当用户与页面交互时才能体现出来，动态伪类选择器包含两种形式：一种是锚点伪类，这是在链接中常见的样式，如:link，:visited；另一种是行为伪类，也称为用户操作伪类，如:hover,:active,:focus

（2）结构伪类：它是通过文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和id属性的定义，使得文档更加简洁

（3）否定伪类：:not()表示否定选择器，即排除或者过滤掉特定元素。前面的选择器都是匹配操作，而:not()操作相反，它表示过滤操作

（4）状态伪类：状态伪类主要针对表单进行设计的，由于表单是UI设计的灵魂，UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。eg:       :enabled,   :disabled,  :checked

（5）目标伪类：目标伪类选择器形式eg: E:target，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能有效。

 

5.基本CSS属性： 背景，文本，字体，尺寸，边距和填充，边框

background (背景)

  • background-color  背景颜色
  • background-image 背景图像
  • background-repeat  背景平铺方式或重复
  • background-attachment  背景图像是否固定或随平面滚动
  • background-position  背景图像起始位置

Text(文本）

  • color  颜色
  • line-height  行高
  • text-align  文本水平对齐方式
  • vertical-align  文本垂直对齐方式
  • Text-indent  首行缩进
  • Text-shadow  字体阴影
  • White-space  空白处理方式
  • Word-spacing  字间距

Font

  • Font-family   指定文本字体系列
  • Font-size   指定文本字体大小
  • Font-style  指定文本字体样式
  • Font-weight  指定字体粗细

Dimension

  • height  设置元素高度
  • Line-height  行高
  • max-height 元素最大高度
  • max-width  元素最大宽度
  • min-heigth  元素最小高度
  • min-winth  元素最小宽度
  • width 设置元素宽度

Margin&Padding

Margin

  • Margin-top 上边距
  • Margin-bottom   下边距
  • Margin-left  左边距
  • Margin-right  右边距

Padding

  • Padding-yop  上填充
  • Padding-bottom  下填充
  • Padding-left  左填充
  • Padding-right 右填充

Border

  • Border-top  上边框
  • Border-bottom  下边框
  • Border-left  左边框
  • Border-right  右边框
  • Border-style  边框样式
  • Border-width  边框宽度
  • Border-color  边框颜色

 

6.div+css 布局

 

 

div和span

 

　　div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式

 

　　div和span的区别在与，span是内连元素，div是块级元素

 

 

盒模型

  • margin:盒子外边框
  • padding:盒子内边框
  • border:盒子边框宽度
  • width:盒子宽度
  • height:盒子高度

 

div+css对网页进行布局

首先在页面整体上进行div标签划分内容区域，然后再用css进行定位，最后再对相应的区域添加内容

（1）用div将页面划分

拿到网站页面图后，首先将分析页面分为哪几块,然后用div划分出各个内容区域，一般页面有页面顶部、轮播图、主体内容、菜单主导航、页面底部几个部分构成，每个部分分别由自己的id来标识

（2）设计各内容块的位置

页面内容确定后，则需要根据内容本身去考虑页面的版型，例如菜单、双栏、左右中等内容块，确定后就可以使用css直接定位了

（3）用css定位

把页面框架确定后就可以css对各个设计的内容块进行定位，然后对各个块进行整体规划，最后再添加内容

 

7.CSS响应式布局

用css的没接查询，使用@media 的三种方式

（1）直接在CSS文件中使用

@media 类型 and (条件1) and (条件二)

{

css样式

}

@media screen and (max-width:980px ) {

body{

 

}

}

（2）：使用@import导入

@import url("css/moxie.css") all and (max-width:980px);

（3）使用link连接，media属性用于设置查询方式（最常用的）

<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>

我们只需用到width衍生出的max-width这个属性，定义输出设备中的页面可见区域宽度来控制该改变的样式即可

 

 







            

            
posted @ 
2020-03-21 14:10 
是阿芸啊 
阅读(855) 
评论(2) 
编辑 
收藏 
举报