一  css的引入方式:

1)    行内样式:     <p style=”color: green”>我是一个段落</p>

2)    内接样式:

<style type=”text/css”>

/*写css代码*/

span{

color:yellow

}

</style>

3)    外接样式(链接式和导入式)

<link  rel=”stylesheet”  href=”./index.css”>       <!—链接式-->

<style type=”text/css”>                                   <!—导入式-->

@import url(“./index.css”);

</style>

二 css选择器:

基本选择器

标签选择器: 标签选择器可以选中所有的标签元素, 比如div, ul, li, p等,不管标签藏的多么深都可以被选中. 选中的是所有的,并不是某一个标签, 所以说是”共性”, 不是”特性”.

用法:  标签名:{color:red;}

Id选择器: 同一个页面中的id不能重复, 任何标签都可以设置id, id的命名规范,大小写严格区分, aaa和AAA是两个不一样的属性值

用法:     #id名{color:red;}

类选择器: 类class和id很相似, 任何标签都可以加类, 但是类是可以重复的. 同一个标签可以有多个类, 用空格隔开.

用法:  .类名{color:red;}

总结:

1)    每个类要尽可能小,要有公共的概念,能够让更多的标签使用;

2)    尽可能用class,除非特殊情况可以用id, id一般是用在js中获取元素的

高级选择器:

a, 后代选择器:

使用空格表示后代选择器,  父元素的后代包括(儿子,孙子,重孙子)

用法:  .container p{color:red;}

b, 子代选择器:

使用>表示子代选择器, 比如div>p, 只表示当前div元素中的子(不包含孙子)的p

c, 并集选择器:

多个选择器之间使用逗号隔开, 表示选中页面中的多个标签, 一些共性的元素, 可以使用并集选择器

用法: h3,.content{color:red;}

d, 交集选择器

同时用两种选择器选择一个标签元素, 例如div.active, 表示类名是active又是div标签的元素

属性选择器

属性选择器就是根据标签的属性, 选择当前的标签.

用法: [for]{color:red;} 或者 input[type=”text”]{background:red;}

伪类选择器

伪类选择器一般用在超链接a 标签中, 使用a标签的伪类选择器, 我们一定遵循”爱恨准则” LoVe  HAte

a:link{color:#666;}  /*没有被访问的a标签样式*/

a:visited{color:yellow;}  /*访问之后a标签的样式*/

a:hover{color:green;}    /*鼠标悬停时a标签的样式*/

a:active{color:#yellowgreen;} /*鼠标按下时a标签的样式*/

注意: link,visited,active这三个只有a标签有, hover其他元素也可以用

伪元素选择器:

/*设置第一个首字母的样式*/

p:first-letter:{color:red; font-size:30;}

/*在…..之前添加内容, 这个属性用的不多,了解即可. 使用这个伪元素选择器就结合content属性*/

p:before{content:”alex”}

/*在….之后添加内容, 使用非常多,与之后的清楚浮动有关*/

P:after{content:”&”; color:red; font-size:40px;}

三  css的继承性和层叠性

继承性

继承:给父级设置一些属性,子元素继承了父级的该属性,这就是我们的css中的继承。

记住:有一些属性是可以继承下来:color 、font-*、text-*、line-* ,主要是文本级的标签元素。

但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承。

层叠性:

权重大的标签覆盖掉权重小的标签

总结:

a)    先看标签元素有没有被选中, 如果被选中了, 就数数(id,class,标签的数量)谁的权重大, 就显示谁的属性, 权重一样大的, 后来者居上

b)   如果没有被选中的标签元素, 权重是0

c)    如果属性的被继续下来的, 权重是0. 权重都是0:”就近原则”(谁描述的近,就显示谁的属性)

四  盒子模型

盒子模型有两种: 标准模型, 和IE模型. 我们重点说标准模型

  1. 盒模型示意图

盒模型属性

width:内容的宽度

height:内容的高度

padding:内边距,边框到内容的距离(父子之间的距离)

border:边框, 就是指盒子的宽度

margin:外边距, 盒子边框到其他盒子的距离(兄弟之间的距离)

盒模型计算

如果一个盒子设置了width, height, padding, border, margin(先不设置,有坑)

盒子真实宽度 = width+2*padding+2*border

盒子真实高度 = height + 2*padding + 2*border

注意:标准盒模型的width 不等译盒子真是的宽度

另外如果要保持盒子真实的宽度, 加padding 就要减width, 减padding就要加width.

Padding(内边距)

Padding是内边距, 是边框到内容之间的距离.

另外padding的区域是有背景颜色的, 并且背景颜色和内容颜色是一样的. 也就是说background-color填充所有的border以内的区域.

Padding有四个方向:

Padding-top: 30px;

Padding-bottom:40px;

Padding-left:30px;

Padding-right:40px;

/* 上 右 下 左*/

Padding: 20px 30px 40px 50px;

/*上 左右 下*/

Padding:20px 30px 40px;

/*上下  左右*/

Padding:20px  30px

/*上下左右*/

Padding:20px

border(边框)

盒子边框的三要素: 粗细,样式, 颜色.

分别设置三要素:

border-width:3px;

border-style:solid;(dotted, double, dashed)

border-color:red;

设置三要素同时设定:

border: 10px solid red;

注意:border:none; 或者 border:0; 都表示border没有设置样式

margin 外边距

表示边框到最近盒子的距离.也有四个方向,并且可以设置4个值

/*表示4个方向的外边距离是20px*/

margin:20px

/*表示盒子向下移动了30px*/

margin-top:30px;

/*表示盒子向右移动了30px*/

margin-left:30px;

五  清除默认样式

有一些标签会默认自带样式,比如ul标签默认有padding-left值,有些默认有margin值,ul、ol和a标签也自带一些样式,但是我们一般在做网页的时候不想用那些自带的样式,所以需要清除页面标签中默认的样式,以便我们更好的去调整元素的位置.

*{

padding:0;

margin:0;

}

ul{

list-style:none;

}

a{

text-decoration:none;

}

input{

border:0;

  • outline:0;

}

web前端css(一)的更多相关文章

  1. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  4. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  5. Bootstrap 简介(Web前端CSS框架)

    目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...

  6. Bootstrap(Web前端CSS框架)

    官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...

  7. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  8. web前端——CSS详解

    简介 CSS(Casading Style Sheet)是一组HTML元素外观的设置规则,用于控制web页面的表现形式,一般被翻译为"级联样式表"或"层叠样式表" ...

  9. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  10. [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

    讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?  列出display的值,说明他们的作用.position的值, relative和absolu ...

随机推荐

  1. Nginx之Eclipse开发环境配置

    C开发的IDE很多,为什么使用Eclipse?原因: 1. 历史原因:使用eclipse时间长,比较熟悉. 2. 功能原因:使用eclipse查看源码,可以在各个函数与头文件间直接跳转.这是所谓号称& ...

  2. 从Header中获得信息

    /// <summary> /// 获得header信息 /// </summary> /// <param name="response">& ...

  3. 2017 JavaScript 开发者的学习图谱

    码云项目推荐 前端框架类 1.项目名称: 基于 Vue.js 的 UI 组件库 iView 项目简介:iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 ...

  4. 宽字符std::wstring的长度和大小问题?sizeof(std::wstring)是固定的32,说明std::wstring是一个普通的C++类,而且和Delphi不一样,没有负方向,因为那个需要编译器的支持

    std::wstring ws=L"kkkk";    int il=ws.length();    int ia=sizeof(ws);    int ib=sizeof(&qu ...

  5. QT如何编译出带调试信息的qtwebkit库

    因为在编译QT的时候默认是不编译成带调试信息的qtwebkit库的,不论如何设置参数都是没有用的.后面在一博客中查找到相关信息   1.编译带debug 信息的webkit 库 注释或者删除qt-ev ...

  6. IDisposeable 最佳实现

    public class MyClass : IDisposable { #region 变量声明 // 指向外部非托管资源 private IntPtr handle; // 此类使用的其它托管资源 ...

  7. QSS 盒子模型

    每个 Widget 所在的范围都是一个矩形区域(无规则窗口也是一个矩形,只是有的地方是透明的,看上去不是一个矩形),像是一个盒子一样.QSS 支持盒子模型(Box Model),和 CSS 的盒子模型 ...

  8. Win8 Metro(C#)数字图像处理--2.41彩色图像密度分割算法

    原文:Win8 Metro(C#)数字图像处理--2.41彩色图像密度分割算法  [函数名称]   彩色图像密度分割函数      DensitySegmentProcess(WriteableB ...

  9. 发布Qt Widgets桌面应用程序的方法(自定义进程步骤,用QT Creator直接生成)

    发布Qt Widgets桌面应用程序的方法 Qt是一款优秀的跨平台开发框架,它可以在桌面.移动平台以及嵌入式平台上运行.目前Qt 5介绍程序发布的文章帖子比较少.大家又非常想要知道如何发布Qt应用程序 ...

  10. linux环境下使用百度云网盘

    linux下经常需要备份一些文件到云端,现在能用的也就只有度娘的百度云网盘了,在github上发现一个挺好的项目,bypy,用来在linux下使用百度云. 项目地址:https://github.co ...