css查缺补漏1

css可以写在哪里

1.和要装饰的标签写在一起

2.内部样式表(内嵌式)是写在head头部标签中，并且用style标签定义

3.外部样式表(外链式)

<head><link rel="stylesheet" href="commons.css"></head>

做到结构、样式、行为的分离

4.基本选择器

标签选择器:设置原有的标签们如:divs、pan标签、h标签

类选择器:把样式写到head里面，以.开头命名，对应的div里得有相同的名字

样式显示效果跟HTML元素中的类名先后顺序没有关系，与书写的上下顺序有关,多类名用空格隔开

id选择器:是唯一的，只能被使用一次，方便被找到一般被js用

5.字体设置

font-size:字号大小,常用单位:px

font-family:字体,宋体、微软雅黑

font-weight:字体粗细,b或strong让字体加粗,normal(400)、bold(700)

font-style:字体风格,i或em让字体变倾斜,normal取消倾斜;italic添加倾斜

font字体连写的基本语法:

选择器{font:font-style font-weight font-size/line-height font-family}

不需要的属性可以省略，但字体大小和类型必须保留

6.文本设置

color:字体颜色

line-height:行间距，一般比字体大7、8像素就行

text-align:水平对齐方式，例:让某标签内的文字居中对齐

text-indent:2em,1em就是一个字的距离。段落首行缩进

text-decoration:u或ins加下划线,s或del加删除线

none(取消装饰),underline(下划线),line-through(删除线)

7.复合选择器

后代选择器指的是所有后代,又称包含选择器,例如div p{},两者用空格隔开

子代选择器,用大于号隔开,子指的是亲儿子(直系亲属),例如ul li > a{}

交集选择器,用点号隔开,某标签.某class,既...又...(p.box-<p class="box"></p>)

并集选择器,用逗号隔开,一个占一行,适合-集体声明，相同样式，例如:div,p,span

8.链接伪类选择器

<style>

    {#未访问过的状态#}

    a:link{

        color: #3c3c3c;

        font-size: 25px;

        text-decoration: none;

        font-weight: 700;

    }

    {#访问过后的状态#}

    a:visited{

        color: orange;

    }

    {#鼠标经过时的状态#}

    a:hover{

        color: #f10215;

    }

    {#鼠标按下时的状态#}

    a:active{

        color: green;

    }

</style>

这四个如果要都写的话，那么顺序不能乱，lv-hao

但一般是这么写的：

a {

    color: #3c3c3c;

    font-size: 25px;

    text-decoration: none;

    font-weight: 700;

}

a:hover{

    color: #f10215;

}

.类名，然后TAB直接生成<div class="类名"></div>

input:属性，然后TAB直接生成<input type="属性" name="" id="">

a:hover

9.显示模式

块级元素(block)独自占一行或多行，可以对其设置宽度、高度、对其等属性

行内元素(inline)-<a>、<span>

高、宽无效，默认宽度就是它本身内容的宽度

行内块元素(inline-block)--<img />、<input />

display可以将三者相互转换(行话叫-显示模式)

10.居中

行内元素、行内块元素可以当成文字来看,让这三个a标签居中,可以写

.nav{text-align: center;},这个类中的标签必须是行内或行内块

<div class="nav">

	<a href="#">网站导航</a>

	<a href="#">网站导航</a>

	<a href="#">网站导航</a>

</div>

line-height:行高等于盒子高度,可以让单行文本垂直居中,不给行高那就只有文本高度

行高小于盒高,文字偏上。

h、p标签都是文字类的块级元素，里面不再放块级元素,a可以放块级元素

基线和基线之间的距离称为行高

11.三大特性

一、层叠性:权重相同则就近原则、后来者居上

二、继承性:子标签会继承父标签的某些样式,如文本颜色和字号,高度等不会继承

三、优先级:权重:*和继承-0,0,0,0;标签-0,0,0,1;类伪类(.)-0,0,1,0;

ID(#)-0,1,0,0;行内样式-1,0,0,0;!important-无穷大

权重可以叠加:

div ul li -- 0,0,0,3;.nav ul li -- 0,0,1,2;a:hover -- 0,0,1,1

自己设置了样式,父辈的样式不继承

12.背景设置

div{

	background-color: purple;

	background-image: url(image/1.jpg);

	background-repeat: no-repeat;

	background-attachment: fixed;  背景附着-scroll:图像随内容滚动;fixed:背景图像固定

	background-position: x y;

	background-position: center center;(top bottom left right center)

}

position后面如果只写一个方位名词,另一个默认是居中的;可以跟数值,

必须有顺序;两者也可以混搭,图片默认会左上角，

一般会给一个position:center top;no-repeat;颜色:#fff

background简写:顺序官方没有强制标准,建议大家如下写：

background:背景颜色 背景图片 背景平铺 背景滚动 背景位置

background:transparent url(image/1.jpg) no-repeat fixed center center

例：一个盒子中图片默认是left top，想要鼠标放上去之后变成底对齐

用background-position

css3透明度：background:rgba(0,0,0,0.8)--黑色背景透明度为8

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .nav{

        height: 50px;

        border-top: 3px solid #FF8500;

        border-bottom: 1px solid #EDEEF0;

        background-color: #FCFCFC;

        }

        .nav a {

            height: 50px;

            line-height: 50px;

            display: inline-block;

            color: #4c4c4c;

            text-decoration: none;

            padding-left: 16px;

            padding-right: 16px;

            font-size: 14px;

        }

        .nav a:hover{

            background-color: #edeef0;

            color: #ff8400;

        }

    </style>

</head>

<body>

    <div class="nav">

        <a href="#">首页</a>

        <a href="#">新闻客户端</a>

        <a href="#">设为首页</a>

        <a href="#">微博</a>

    </div>

</body>

</html>

新浪导航栏

13.三大模块：盒子模型、浮动、定位

一、盒子边框:border-color: red;border-style: solid;border-width: 1px;

简写:border:1px solid blue;

一般页面中一条横线使用上边框来做：

border-top: 1px solid red;

table,td{border-collapse: collapse;}  合并相邻边框

二、内边距

padding用于设置内边距,是指边框与内容之间的距离

padding: 20px;  上下左右都是20px

padding: 10px 20px;  上下10px 左右20px

padding: 10px 20px 30px;  上10px 左右20px 下30

padding: 10px 20px 30px 40px;  上10 右20 下30 左40--顺时针

这样会撑开带有height和width的div

盒子的宽度是由五部分组成：左边框+左边距+width+右边距+右边框

调试的时候可以看到width是青色,淡黄色是外边距-margin,淡紫色是内边距-padding

所以通过div中的颜色就可以分辨内外边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body{

            background-color: #eee;

        }

        .article{

            height: 380px;

            width: 263px;

            border: 1px solid #ccc;

            padding: 20px 15px 0;

            margin: 100px;

        }

        .article h4{

            color: #202026;

            font-size: 20px;

            border-bottom: 1px solid #ccc;

            padding-bottom: 5px;

            margin-bottom: 12px;

        }

        .article ul li{

            height: 38px;

            line-height: 38px;

            border-bottom: 1px dashed #ccc;

            padding-left: 10px;

        }

        /*.article ul{

            margin-top: 12px;

        }*/

        .article a{

            font-size: 18px;

            color: #333;

            text-decoration: none;

        }

        .article a:hover{

            text-decoration: underline;

        }

        li{

            list-style: none;

        }

    </style>

</head>

<body>

    <div class="article">

        <h4>最新文章/New Articles</h4>

        <ul>

            <li><a href="#">dahexiangdouliu</a></li>

            <li><a href="#">dahexiangdouliu</a></li>

            <li><a href="#">dahexiangdouliu</a></li>

            <li><a href="#">dahexiangdouliu</a></li>

            <li><a href="#">dahexiangdouliu</a></li>

        </ul>

    </div>

</body>

</html>

padding例子

三、外边距

1.margin-left:auto-左边充满,盒子跑到最右边;

margin-right:auto-右边充满,盒子跑到最左边

margin: 0 auto 上下距离是0,左右都充满,所以居中了

2.合并外边距:两个盒子合并后的外边距为两者中的较大者

3.外边距塌陷(嵌套元素垂直外边距的合并):

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,

则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。

解决办法:1.为父元素定义1px的上边框或上内边距;2.为父元素添加overflow:hidden

14.阴影和浮动

1.padding不会撑开盒子的情况:

两个嵌套的盒子,父盒子有宽度,在父盒子中设定padding会撑开盒子,

子盒子没有设置宽度,用的是默认值,故不会撑开盒子

盒子居中的最优方式:

如果子盒子没有设置宽度,只能用padding(且不会撑开父盒子),

如果子盒子设置了宽度,则用margin最合适.我觉得还是margin好用

也就是想要让块级元素居中,必须设置宽度.想让其超过上边框用-px,

但上边框必须有border,p标签中肯定有行高.

2.圆角边框(css3)只有正方形才能变成圆-border-radius: 50%;

3.盒子阴影(css3)-box-shadow

水平阴影、垂直阴影、模糊距离(虚实)、阴影尺寸(影子大小)、阴影颜色

box-shadow:0 15px 30px rgba(0,0,0,0.1);

前两个是必须的,然后按顺序往后排,transition:all ls;阴影会慢慢出现--用CSS是一种趋势

4.浮动特性：浮动脱离标准流,不占位置,会影响标准流,浮动只有左右浮动

不仅是向上浮,还向外浮,1、2、3红绿蓝三个相同大小盒子,1、3浮动,

2不浮动,会看到页面上只有一上一下红蓝两个盒子.

5.浮动可以让块级元素默认转换为行内块元素

如果给行内元素添加了浮动,此时不需要转换也可以有宽高.

css查缺补漏1的更多相关文章

CSS查缺补漏篇
前面的话:关于CSS,之前我已经做过一些基础的知识点介绍.CSS主要是用来给页面设置样式的,一般说来,在一个网站中,CSS应该独立封装在一个单独的.css外部文件中.样式的设置总体来说是不难的,但是需 ...
HTML和CSS查缺补漏
margin的问题: 1.margin-top向上传递解决:1.父元素border边框,2.父元素使用overflow:hidden 3.为父元素或者子元素声明绝对定位,4.为父元素或者子元素声明浮 ...
css查缺补漏2
15.布局流程一.确定页面的版心; 二.确定页面中的行模块,以及每个页面中的列模块三.制作HTML结构例:.top+.banner+(.main>.left+.right)+.footer ...
「查缺补漏」巩固你的Nginx知识体系
Nginx篇基本介绍 Nginx是一款轻量级的 Web服务器 / 反向代理服务器 / 电子邮件(IMAP/POP3)代理服务器,主要的优点是: 支持高并发连接,尤其是静态界面,官方测试Nginx能够 ...
Android查缺补漏--Activity生命周期和启动模式
一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...
Android查缺补漏--BroadcastReceiver的类型与使用
Broadcast 是一种被用于应用内和应用之间传递信息的机制.一个广播可以对应多个接受者.一个完整的广播机制,需要具有以下三个要素: 发送广播的Broadcast 接受广播的BroadcastRec ...
Android查缺补漏（View篇）--在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0？
在 Activity 的 onCreate() 方法中为什么获取 View 的宽和高为0 ? @Override protected void onCreate(Bundle savedInstanc ...
Android查缺补漏--ContentProvider的使用
ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...
Android查缺补漏--Service和IntentService
Service的运行不依赖界面,即使程序被切换到后台,Service仍然能够保持正常运行.当某个应用程序进程被杀掉时,所有依赖于该进程的Service也会停止运行. Service 分为启动状态和绑定 ...

随机推荐

and和or运算
and和or的运算,从前向后按顺序计算,当True结果遇到or就停止,返回True:当False结果遇到and就停止,返回False:False遇到or,继续走:True遇到and,继续走. > ...
Linux异常体系之vector_stub宏解析
ARM-Linux汇编的宏定义语法说明如下: 使用注意: 1.宏定义以.macro开始,以.endm结束 2.可带参数,参数可有默认值 3.直接使用参数的名字\arg vector_stub宏的功能: ...
基于百度OCR的图片文字识别
先上图,有图有真相首先在百度开通ORC服务,目前是免费的,普通识别每天50000次免费,非常棒! 百度文档:http://ai.baidu.com/docs#/OCR-API/top 下载百度SDK ...
Go语言学习03
Go语言-数组类型一个数组(Array)就是一个可以容纳若干类型相同的元素的容器.这个容器的大小(即数组的长度)是固定的,且是体现在数组的类型字面量之中的.比如,我们声明了一个数组类型: type ...
Python ORM
本章内容 ORM介绍 sqlalchemy安装 sqlalchemy基本使用多外键关联多对多关系表结构设计作业 ORM介绍如果写程序用pymysql和程序交互,那是不是要写原生sql语句.如果 ...
Leetcode8--->String to Integer(实现字符串到整数的转换)
题目: 实现字符串到整数的转换解题思路: 下面给出这道题应该注意的一些细节: 1. 字符串“ 123 ” = 123: 2. 字符串“+123” = 123: 3. 字符串“-12 ...
CRM知识点汇总(未完💩💩💩💩💩)
一:项目中每个类的作用 StarkSite 对照admin中的AdminSite,相当于一个容器,用来存放类与类之间的关系. 先实例化对象,然后执行该对象的register方法.将注册类添加到_reg ...
c4d 宝典部分二
一.tvart 文字 1.当选择工具选择面或边时不出现对象坐标时,需要将容错的选项选中 2.当选择两个面右键挤压的时候,如果两个面不分离,需要取消群组并且拉动箭头的时候需要在空白区域拉动 tvar ...
Vue样式绑定、事件绑定
1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...
BZOJ4566 [Haoi2016]找相同字符【后缀数组】
题目给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. 输入格式两行,两个字符串s1,s2,长度分别为n1,n2.1 & ...

css查缺补漏1

css查缺补漏1的更多相关文章

随机推荐

热门专题