关键词：

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;
　　}

【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;
}

三、样式的使用方式

【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" />

 属性选择器:

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

先前学习了html,今天我们来学习前端基础中的css。一、css的语法css规则主要由两部分组成：选择器，以及一条或者多条申明语句。例如：h1{color:red;font-size:14px}二、css的四种引入方式1.行内式 行内式是在标记的style属性中设定CS... 查看详情

前端基础之css

目录前端基础之CSSform表以注册功能为例验证form表单提交数据CSScss注释css学习流程@前端基础之CSSform表以注册功能为例label标签配合input一起使用的input标签input标签type属性text文本password密文date日期radio多选一checkbox多选多checked默... 查看详情

前端基础——css

一、CSS概述css(cascadingstylesheets)层叠样式表,可以轻松设置网页元素的显示、位置和格式外,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果,简而言之,css就是要对网页的显示效果实现与word一样的排版控制。DIV+CSS标准的叫法xht... 查看详情

前端基础html基础之css

一、id选择器、class选择器、标签选择器、属性选择器、组合选择器　　设置css样式有三种，第一种是通过在head中style定义选择器，写css样式　　第二种通过在标签中添加属性的方式定义css样式style=“background-color：black”　　第... 查看详情

前端基础之css

 CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;...property:value}‘‘‘例如：h1{color:red;font-size:14px;}css的四种引入方式   查看详情

前端基础——css

一 CSS的四中引入方式1.行内式<pstyle="background-color:rebeccapurple">HelloWorld</p>2.嵌入式把CSS样式集中写在head标签对中的style标签对中。3.链接式将一个CSS文件引入HTML。<linkhref="mystyle.css"rel="stylesheet"type="text/css" 查看详情

前端基础-css

CSS　　CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。　　***https://cdn.bootcss.com/normalize/8.0.1/normalize.css###normalize 下载清除浏览器的默... 查看详情

css基础总结一

　　最近在弄一个简单管理系统的前端，所以打算将做项目的一些个人感想以及总结简单罗列下，当然，主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为js部分和css部分，下面是css的基础部分总结　一... 查看详情

前端基础之css

目录：简介选择器（selecttor）常用属性页面布局 一、简介 1、CSS定义 CSS是CascadingStyleSheets的简称，中文称为层叠样式表。 CSS规则由两个主要的部分构成：属性和属性值用冒号隔开，以分号结尾。‘‘‘selector{proper... 查看详情

前端基础之css

　　一、css语法　　CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;......property:value}‘‘‘　　例如：‘‘‘h1{color:red;font-size:14px}‘‘‘　　二、css的四种引入方式 　　2.... 查看详情

前端基础?css

css的四种引入方式 1.行内式          行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。<pstyle="background-color:rebeccapurple">helloyuan</p>2.嵌入式&n 查看详情

前端基础知识之css

前端基础知识之css  https://www.cnblogs.com/liwenzhou/p/7999532.html#autoid-4-5-0CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。  css就是修饰那些html元素的其主要内容为两大块： 找到标签 和 修 查看详情

前端基础之css

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;...property:value}‘‘‘例如：h1{color:red;font-size:14px;}  css的四种引入方式 1.行内式行内式是在标记的style属性中设... 查看详情

前端基础之css

一、CSS语法　　网址链接：http://www.w3school.com.cn/css 一、语法规则　　css规则由两个主要的部分组成：选择器，以及一条或多条声明。‘‘‘selector{property:value;property:value;...property:value}‘‘‘　　例子：h1{color:red;font-size:14px;}... 查看详情

前端基础之css

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。selector{property:value;property:value;...property:value}例如：h1{color:red;font-size:14px;}CSS语法说明CSS的四种引入方式1.行内式　　行内式是在标记的style属性中设定CSS样式。... 查看详情

前端基础之css

CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。123456789‘‘‘        selector{                 查看详情

前端基础--css

CSS知识CSS（CascadingStyleSheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。Css之车更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任... 查看详情

前端基础之css

一、CSS语法css语法包括两部分：选择器、和声明。例：h1{color:red;front-size:14px}二、CSS语法的引入方式1、行内样式：行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。<divstyle="width:100px;height:1... 查看详情