css查缺补漏1

css可以写在哪里

1.和要装饰的标签写在一起
2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义
3.外部样式表(外链式)

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

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-

) 并集选择器,用逗号隔开,一个占一行,适合-集体声明,相同样式,例如: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)-
高、宽无效,默认宽度就是它本身内容的宽度
行内块元素(inline-block)--
display可以将三者相互转换(行话叫-显示模式)

10.居中

行内元素、行内块元素可以当成文字来看,让这三个a标签居中,可以写
.nav{text-align: center;},这个类中的标签必须是行内或行内块

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>Titletitle>
    <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>Titletitle>
    <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 Articlesh4>
        <ul>
            <li><a href="#">dahexiangdouliua>li>
            <li><a href="#">dahexiangdouliua>li>
            <li><a href="#">dahexiangdouliua>li>
            <li><a href="#">dahexiangdouliua>li>
            <li><a href="#">dahexiangdouliua>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.浮动可以让块级元素默认转换为行内块元素

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

 

转载于:https://www.cnblogs.com/fawaikuangtu123/p/9814490.html

你可能感兴趣的:(css查缺补漏1)