码迷,mamicode.com
首页 > Web开发 > 详细

前端基础css(二)

时间:2020-03-13 14:35:35      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:order   play   hit   eee   划线   pac   元素选择器   none   12px   

HTML:用于显示页面的内容

CSS:用于以什么样的形式(样式)去显示

一、 选择器

【1】 标签/元素选择器 (整个页面的所有的相同的标签都显示统一的样式)

h1{

  font-size: 20px; 字体大小

  color: red; 字体颜色

  font-family: "楷体"; 字体样式

}

【2】 类选择器 (统一的样子中,N多特殊的样式)

<style type=”text/css”>

  .blue{

    color: blue;

  }

</style>

<h1 class="blue">寂寞沙州冷</h1>

【3】 id选择器( 样式唯 一)

<style type=”text/css”>

  #ticket{

    font-size: 40px;

    color: green;
  }

  </style>

 

  <h1 id="ticket">12306网站</h1>

【4】 * 页面中所有的标签

*{

margin: 0px; /**元素元素之间的空白(间距)*/

}

【5】 复合选择器 (页面上所有div,ul,p都去掉外间距(margin))

div,ul,p{ margin: 0px;}

【6】 子选择器 (直接的儿子及孙子。。。)

<div>

  <p>这一个div相当于一张透明的张</p>

  <p>这一个div相当于一张透明的张</p>

  <span>

    <p>span中的p</p>

    <p>span中的p</p>

  </span>

</div>

div p{

  color: #000;

  font-size: 20px;

}

【7】 子选择器 (直接的子元素)

div>p{

  color: #000;

  font-size: 20px;

}

二、样式

1、字体的样式

【1】 font-size: 字体大小

【2】 font-weight:字体粗细

【3】 color:字体的颜色

【4】 font-style:字体样式 倾斜

【5】 font :bold 12px/20px “黑体“;

2、块级元素常的样式

【1】 width:宽

【2】 height:高

【3】 background-color:背影色

【4】 border:1px solid red;

3、字体:

text-decoration: (none, underline(下划线),overline(上划线),line-through(删除线))

letter-spacing: 字与字之间的间距

line-height: 行与行之间的间距

font-size:字体大小

color:字体的颜色

font-weight:字体的粗细

注意事项:line-height与height值相同,文字/图片 垂直居中

4、文本:

text-align (left,center,right)文本的水平对齐方式

5、背景:

mso-char-indent-count:1.0">background-image:

background-position:平移方式

background-repeat:平铺方式 (no-repeat,repeat, repeat-x,repeat-y)

6、定位:

【1】position

(1) position: absolute; 绝对定位(浏览器的左上角)

top:100px;

left:300px;

(2)相对定位 (相于原来的位置)

position: relative;

top:100px;

left:200px;

(3)固定定位

position:fixed;

top:100px;

left:10px;

【2】z-index

z-index: 它的值大在上面,值小在下面

z-index: 30;

7、布局

[1]float: (left,right)

[2]clear:both

[3]display: block (行>块) /inline(块->行)

a:hover{

  background-color: #eee;

  color:#ff7300;

  width:100px;

  height:35px;

  line-height: 35px;

  display:block;

  /*visibility: hidden;*/

  text-align: center;
}

[4]盒子模型

margin:元素与元素之间的间距

padding:边框与内容之间的间距

border:边框

三、样式的使用方式

【1】 内嵌样式 直接写在标签中<h2 style=”color:red;”></h2>

【2】 内联样式 <style>………</style>

【3】 外部样式 <link rel="stylesheet" type="text/css" href="css/css_01.css"/>

<link rel="shortcut icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico" />

优先级:内嵌>内联>外部

优先级: id选择器>类选择器>元素/标签选择器

 属性选择器:



input[type=text]{

  border:1px solid blue;

  width:300px;

  height:30px;

}

 

 

text-decoration: (none, underline(下划线),overline(上划线),line-through(删除线))

letter-spacing: 字与字之间的间距

line-height: 行与行之间的间距

font-size:字体大小

color:字体的颜色

font-weight:字体的粗细

注意事项:line-height与height值相同,文字/图片 垂直居中

前端基础css(二)

标签:order   play   hit   eee   划线   pac   元素选择器   none   12px   

原文地址:https://www.cnblogs.com/vole/p/12486245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!