CSS

用户135171718391
344 阅读5分钟
css样式

  • 行内式(内联样式)

  • 概念：

    称行内样式、行间样式.

    是通过标签的style属性来设置元素的样式

    语法：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例子：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
    • 内部样式表(内嵌样式表)
    • 概念：

    称内嵌式

    是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

  • 其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

<style>
	 div {
	 	color: red;
	 	font-size: 12px;
	 }
</style>
外部样式表(外链式)

  • 概念：

    称链入式

    是将所有的样式放在一个或多个以 .CSS为扩展名的外部样式表文件中，

    通过link标签将外部样式表文件链接到HTML文档中

语法：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
css基础选择器
  • 标签选择器
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  • 作用： 标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
  • 类选择器：
  • 作用：可以选出1个或者多个标签下
    用法：
nav { color: red; }

语法：
类名选择器：
类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}

标签

<p class='类名'></p>
  • id选择器 作用：一次只能选择器1个标签
语法：#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签

<p id="id名"></p>
  • 通配符选择器 作用：选择所有的标签
语法：{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
font字体
  • font-size:大小
语法：p {  
    font-size:20px; 
}
  • font-fanmily：设置哪一种字体
语法：p{ font-family:"微软雅黑";}

  • font-wight：字体粗细
    normal :默认值(不加粗的)
    bold: 定义粗体(加粗的)
    100~900 :400 等同于 normal，而 700 等同于 bold

  • font-style:字体风格
    normal作用：默认值，浏览器会显示标准的字体样式 font-style: normal;
    italic作用：浏览器会显示斜体的字体样式。

font设置字体样式
语法：选择器 { font: font-style  font-weight  font-size/line-height  font-family;}
  • font-size:字号
  • font-family：字体
  • font-weight：字体粗细
  • font-style：字体样式
color：文本颜色
  • 预定义的颜色值：red，green，blue，还有我们的御用色 pink
  • 十六进制：#FF0000，#FF6600，#29D794
text-align：文本水平对齐方式

  • 作用： text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性

    left：左对齐
    right：右对齐
    center：居中对齐

line-height:行间距
  • 作用： line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
tsxt-indent：首行缩进
  • 作用： text-indent属性用于设置首行文本的缩进，
    1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度 
    语法：p {
  /*行间距*/
  line-height: 25px;
  /*首行缩进2个字  em  1个em 就是1个字的大小*/
  text-indent: 2em;

} ```

## text-decoration: 文本的装饰

none:默认.定义标准的文本。 取消下划线（最常用）
underline:定义文本下的一条线。下划线 也是我们链接自带的（常用）

什么是浮动（float）

概念:元素的浮动是指设置了浮动属性的元素会
1.脱离标准普通流的控制
2.移动到指定位置。
作用：1、让多个盒子(div)水平排列一行,使浮动成为布局的重要手段
2、可以实现盒子左右对齐 3、控制图片,实现文字环绕图片

语法：选择器{float:属性值;}
  • 属性值：none元素不浮动
  • left：元素向左移动
  • right：元素向右移动
清楚浮动方法
选择器{clear:属性值;}  , clear 清除
  • 额外标签法
    是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
 <div style=”clear:both”></div>，或则其他标签br等亦可。
  • 父级添加overflow属性方法
 overflow为 hidden| auto| scroll  都可以实现。
  • 使用after伪元素清楚浮动
    使用方法
clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
  • 使用双伪元素清楚浮动
    使用方法
clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
css属性书写顺序

建议遵循以下顺序：

1、 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、 自身属性：width / height / margin / padding / border / background
3、 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4、 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

  • 页面制作 版心为1200像素
w {
    width: 1200px;
    margin: auto;
}
定位

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移
边偏移

在 CSS 中，通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词） top 80px :顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom 80px :底部偏移量，定义元素相对于其父元素下边线的距离。
left 80px : 左侧偏移量，定义元素相对于其父元素左边线的距离。
right 80px :右侧偏移量，定义元素相对于其父元素右边线的距离

  • 定位模式
选择器 { position: 属性值; }

static:静态定位：
relative：相对定位：相对定位是元素相对于它 原来在标准流中的位置
absolute：绝对定位 ：绝对定位是元素以带有定位的父级元素来移动位置 fixed：固定定位：固定定位是绝对定位的一种特殊形式： 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

avatar
文章
阅读
粉丝