前端 CSS上

2020-12-27 23:27

阅读：403

标签：消息文件中文字符简写 str ant 左右相对摔跤吧

1：CSS介绍

1：CSS初始

css一HTML为基础，提供丰富的功能，如字体，颜色背景的控制及配板等

2：CSS样式规则

h1  {
   color:red;
   font_size:25px;
}
1:h1是选择器，用于指定CSS样式作用的HTML对象
2：属性和属性值以“键值对”的形式出现

2：css字体样式属性

字号大小:（font-size）

font-size用于设置字号，一般用像素单位px

  {
      font-size: 34px;
      color: pink;
     }

字体：（font-family）

font-family属性设置字体，长用字体有宋体，微软雅黑，黑体，

尽量使用默认字体
如果含有空格 # $ 则需要用英文状态下家单引号或双引号

    h2 {
      font-family: "微软雅黑"
      color: pink;
      
    }

字体：（CSS Unicode）

字体粗细（font-weight）

font-weight属性定义字体的粗细，可用属性值为：normal，bolder,lighter,100-900(100的整数倍，数字400等价位 normal，700等价于 bold,更喜欢用数字来表示)

 span {
        font-weight: 800;  /* 字体的加粗效果 */
    }
strong {
        font-weight: normal;  /* 让加粗的字体不加粗 */
    }

字体分格（font-style设置字体的风格，如倾斜，正常）

h4{
        font-size: 16px;
        font-style: italic;  /*  让字体倾斜 */
    }

平时我们很少给字体倾斜，反而喜欢给斜体标签（em,i）改为默认值

font字体的综合设置

 h2 {
      /* font-family: "微软雅黑"    *//* 设置字体 */
      color: pink;
      /* font:  font-style   font-weight   font-size/line-height   font-family; */
         font:   italic   bold     30px     "微软雅黑"；
      
    }

必须按照（font:  font-style   font-weight   font-size/line-height   font-family;）这个顺序；

3：CSS基本选择器

要将CSS的样式引用于特别的HTML元素，首先要找到该目标元素。在CSS中，执行这一任务的样式规则部分被成为选择器。

1：标签选择器

标签选择器是指用HTML标签名称作为选择器

2：类选择器

语法：

定义：   .类名{属性1：属性值1；属性2：属性值2；}
调用：   class=类名

长名字或词组可以使用中横线来选择器命名，不建议使用纯数字或英文字母来表示、


    
Document
{
        font-size: 14px;

    }
    .font30 {
        font-size: 30px;
    }
    .pink {
        color: pink;
    }
    .skybule {
        color: skybule;
    }

    
    

    亚瑟
    刘备
    安其拉
    貂蝉
    西施

类选择器

3：谷歌标题案例


    
Document
{
         font-size: 100px;
     }
     .syebule { color: skyblue; }
     .red { color: red; }
     .orgle { color: orange; }
     .green { color: green; }
    


    G
    o
    o
    g
    l
    e

谷歌图标案例

4：id选择器

#id名{属性1：属性值1； 属性2=属性值2；}

    {color: pink;}
    #two {color: yellow;}
    #srong{color: green;}
    


    熊大
    熊二
    光头强

案例

类选择器和id选择器的区别：

类选择器可以重复使用，id选择器相当于身份证号，是唯一的，只允许使用一次

5：通配符选择器

*{属性1=属性值1；属性2=属性值2}

不常用

6：链接伪类选择器

:link 未访问的连接
:visited 以访问的链接
：hover 鼠标移动到连接上
：active 选定的连接

    {   /* 未访问的连接 */
        font-size: 20px;
        color: gray;
        font-weight: 700;
    } 
    a:visited{   /* 已访问的连接 */
        font-size: 20px;
        color: orange;
        font-weight: 700;

    }
    a:hover{  /*   鼠标移动到连接上 */
        font-size: 20px;
        color:red;
        font-weight: 900;
    }
    a:active{   /*  选定连接 */
        font-size: 20px;
        color: green;
        font-weight: 900px;
    }
    


   
    秒杀

秒杀案例

注意：他们的顺序一定不能颠倒，按照lvha的顺序，love hate记忆法

实际工作中。我们只用当鼠标经过的时候的连接伪类选择器，案例如下；其他都不需用

{
        font-size:16px;
        color: gray;
        font-weight: 700;

    }
    a:hover {
        color: red;
    }
    


    秒杀

7：结构伪类选择器

：first-child ：选取器父元素的首个子元素的指定选择器
：last-child: 选取属于其父元素的最后一个子元素的指定选择器
：nth-child(n): 匹配属于其父元素的第N个子元素，不论元素的类型
：nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。


    
Document
{  /* 选择第一个孩子 */
        color: pink;
    }
    li:last-child {   /* 选择最后一个孩子 */
        color: skyblue;
    }
    li:nth-child(4) {  /* 选择第四个孩子，   n  代表第几个的意思 */   
        color: purple;
    }
    li:nth-child(even){
        color: deeppink;   /* 可以选择所有的偶数  even  偶数  的孩子标签 */
    }
    li:nth-child(2n+1) {  /*  n  0  2n   2n+1  3n   可以选择所有的数 */
        color: yellow;     
    }
    


    
第一个孩子
        第二个孩子
        第三个孩子
        第四个孩子
        第五个孩子
        第六个孩子
        第七个孩子

结果伪类的选择器

8：目标伪类选择器

：target目标选择器，可用于选取当前活动的目标元素

{
         color: red;
         font-size: 30px;

     }

4：CSS外观样式及其应用

1:css颜色

    {
        color: red;

    }
    li:nth-child(2) {
        color: #14e6ac;
    }
    


    color属性用于定义颜色，器取值方法有以下的三种
    预定的颜色值，如red,green，blue等
        十六进制，如#FF0000，#FF6600，十六进制是最常用的定义颜色的方式
        RGB代码，如红色可以表示rgb(255,0,0)

2：行高，对齐和首行缩进

1：line-height属性用于设置行间距，就是行与行之间的距离，及字体的垂直距离，一般称为行高，

line-height常用的属性值单位有三种，像素px,相对值em,和百分比。

一般情况，行距比字号大7.8就可以了

2：水平对齐方式

text-align属性用于设置文本内容的水平对齐方式

left：左对齐（默认值）

right：右对齐

center：居中对齐

3：首行缩进

text-indent属性用于设置首行缩进，建议em作为单位

1em是一个字的宽度，如果是汉字宽度，1em就是一个汉字的宽度。

    {
        line-height: 26px;  /* line-height属性用于设置行间距 */
    } 
    h3 {
        text-align: center;   /* text-align属性用于设置文本内容的水平对齐方式 */
    }
    p {
        text-indent: 2em;  /*  text-indent属性用于设置首行缩进，建议em作为单位 */
    }

3：字间距和单词间距

1：letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白，其属性值可为不同单位的数值，允许使用负值，默认normal。

2：word-spacing属性用于定义英文单词之间的距离，对中文字符无效。

head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
    div {
        letter-spacing: 3px;
    }
    p{
        word-spacing:  5px;
    }
    style>
head>
body>
    div>我是熊大div>
    p>my name is andy!p>
body>

4：颜色半透明（css3）

style>
    h1 {
        color: rgba(0,0,0,0.5);   0~1之间，四个参数不能省略
    }
    style>
head>
body>
    h1>文字是可以半透明的h1>
body>

5：文字阴影初始CSS3

text-shadow属性设置阴影，

style>
    h1 {
        /* color: rgba(0,0,0,0.5); */
        font-size: 100px;
        text-shadow: 5px  12px  3px  rgba(173, 163, 163, 0.5);
        /* text-shadow:  水平位置    垂直位置   模糊距离   影音颜色； */
    }
    style>
head>
body>
    h1>文字是可以半透明的h1>
body>

6：submit快捷方式

1：div tab

2: div*3

3:ur > p

4:div + p

5: .demo

5：案例

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
    body {
        color: #3c3c3c;   /* 一般网页默认的颜色 */
    }
    h1 {
        text-align: center;  /* 文字水平居中 */
        font-size: 25px;   
        font-weight: normal;  /* 让加粗的字体不加粗 */
    }
    p {
        text-indent: 2em;  /*  首行缩进 */
        font-size: 14px;
        line-height: 24px;   /* 行间距 */
        letter-spacing: 1px;   /* 定义字间距 */
    }
    div {
        text-align: center;
        font-size:14px;        
    }
    .sport {
        color: #f40;
    }
    .packtake {
        color: #f00;
    }
    .co {
        font-weight: 700
    }
    a:hover {
        color: #f00;
    }
    em {
        font-style: normal;   /* 让倾斜的字体不倾斜 */
        color: skyblue;
    }
    style>
head>
body>
    h1>中医队赛前突然换帅仍胜伊藤   高原黑马欲阻击舜天h1>
    div>2017年07月16日20:11  span  class="sport">新浪体育 评论中大奖span> (a href="#"  class="packtake">11a>参与） a href="#">收藏文本a>div>hr> 
    p>专题摘要6月19日-7月14日，2017赛季夏季em>[微博]em>转会窗口将开放，在中超新政策之下，16支球队又会有怎样的动作，让我们拭目以待。陈子豪决赛轮交出72杆，总成绩-1，并列第33位。黄文义72杆，总成绩+2，并列第43位。吴红富76杆，总成绩+4，并列第49位。元天74杆，总成绩+7，并列第56位。汤榕健和叶剑锋均交出79杆，总成绩+10，并列第69位。杨伊农82杆，总成绩+19，单独第64位p>
    p>2017年10月23日 - 2017em>[微博]em>佛山公开赛-欧洲挑战巡回赛暨中国男子职业高尔夫巡回赛圆满落幕,中国球手张蕙麟成为赛事历史上唯一一位两次获得这一奖项的球员。新浪体育 | 2017年10月23日 08...p>
    p>北京时间10月22日消息。2017>[微博]em>佛山公开赛今日在佛山高尔夫俱乐部落下战幕。威尔士球手奥利弗-法尔（Oliver Farr）五杆优势大胜，赢得个人第二座欧巡挑战赛冠军。张蕙麟在中国球手中表现最佳，获得并列第6位。手握五杆优势出发的法尔今日打出5只小鸟，吞下两记柏忌，打出低于标准杆3杆的69杆，总成绩270杆（-18，69-66-66-69），最终守住五杆巨大领先，继2014年土航挑战赛后再度问鼎欧巡挑战赛冠军。本场比赛冠军，让法尔获得了8万美元的冠军奖金。p>
    　
   
　
body>
html>

小案例

6：标签显示模式（css的显示模式，即书写位置）

1：行内样式（内联样式）

标签名   style="属性1：属性值；属性2：属性值">内容标签>

2：内部样式（内嵌样式）

head>
meta charset="UTF-8">
title>Documenttitle>
style>
选择器 {

}
style>
head>

3：外部样式（外链式）

连入式是将所有的样式放在以css为扩展名的外部样式表文件中。

link rel="stylesheet"  tyle="text/css" href="css文件路劲"  />

-href: 定义所连接外部样式表的URL，

-tyle: 定义所连接文档的类型在这里指定为"text/css",表示连接的外部文件为css.

-rel: 定义当前文档与连接文档之间的关系，在这里指定"stylesheet" 表示被连接的文档是一个样式表文件

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
    link rel="stylesheet"  type="text/css" href="text.css"  >
head>
body>
    div  class="demo">连入式是将所有的样式放在以css为扩展名的外部样式表文件中。div>
    div>连入式是将所有的样式放在以css为扩展名的外部样式表文件中。div>
    div>连入式是将所有的样式放在以css为扩展名的外部样式表文件中。div>
body>
html>

HTML

.demo {
    font-size: 20px;
    color: pink;
}

css

4：块级标签显示模式

每个块级元素独自占据一整行或多整行，可以对其设置宽度，高度，对齐属性，长用于网页布局和网页结构的搭建。

-

,

等，其中
是典型的块元素
View Code

特点：

总是从新行开始
高度，行高，外边距，以及内边距都可以控制
宽度是默认的1
可以容纳内联元素和其他块及元素

5：行内标签显示模式

行内元素不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度，高度，对齐等属性，常用于控制页面中的文本样式。

常见的行内元素有 ,,,,,,,,,其中是典型的行内元素。

和另行的元素在一行上，
高宽无效，但水平方向的padding和margin可以设置，垂直方向无效
默认快读就是他本身内容的宽度
行内元素只能容纳文本。a除外

6：行内块元素

行内元素——,,

可以给他们设置宽高和对齐属性

7：显示模式转换


    
Document
{
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline;   /* 块级标签转换为行内标签 */
    }
    span {
        width: 100px;
        height: 100px;
        background-color: hotpink;
        display: block;   /* 行内标签转换为块及标签 */
    }
    


    123
    456
    789
    abc
    efg
    hij

显示模式的转换

7：CSS复合选择器

1：CSS书写规范

空格规范
选择器规范
属性规范

2：交集选择器

head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
    .singer {  /* 类选择器 */
        color: #f00;
    }
    div.singer {   /* 由两个选择器构成，其中第一个为标签选择器，第二个为类选择器，
        交集选择器，是并且的意思。即……又……的意思，既是singer 又是div  满足的条件，用的比较少。 */
        font-weight: 700;
    }
    style>
    
head>
body>
    div class="singer">刘德华div>
    div class="singer">张学友div>
    p  class="singer">汪峰p>
    p class="singer">韩红p>

3：并集选择器

head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
    p,div,h1,.yao { /*  并集选择器，包括任何形式的选择器（标签选择器，类选择器，id选择器，都可以是并集选择器的一部分） */
        color: #0f0; /* 他们都是绿色的 */ 
    }
    style>
head>
body>
    p>香蕉p>
    p>橘子p>
    div>大白菜div>
    div>辣椒div>
    h1>米饭h1>
    h1>白面h1>
    em  class="yao">我也要变色em>br>
    em>我不要变色em>br>
    em>我不要变色em>br>
body>

4：子元素选择器

用来选择元素或元素的后代，其写法是吧外层的标签写在外面，内层标签写在里面，中间用空壳隔开。当标签发生嵌套是，内标签就称为了外层标签的后代。

head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
    div ul li {  
        color: red; /*  让div里面的ul里面的li为红色 */
    }
    style>
head>
body>
    div class="nav">
        ul>
            li>首页li>
            li>导航li>
            li>联系li>
        ul>
    div>
    ul>
        li>百度li>
        li>新浪li>
        li>搜狐li>
    ul>
body>

head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
    .item li {  /* 所有的后代选择器 */
        color: #f00;
    }
    .item>li {   /* 子元素选择器（亲儿子） */
        color: #0f0;
    }
    style>
head>
body>
    ul  class="item">
        li>一级菜单
            ul>
                li>二级菜单li>
                li>二级菜单li>
            ul>
        li>
        li>一级菜单
            ul>
                li>二级菜单li>
                li>二级菜单li>
            ul>
        li>
        li>一级菜单
            ul>
                li>二级菜单li>
                li>二级菜单li>
            ul>
        li>
    ul>
body>

5：测试选择器

head>
    meta charset="UTF-8">
    title>Documenttitle>
    style>
     /* 登录为红色 */
    .site-r a { 
        color: red;
    }
    /* 主导航栏里所有的连接为蓝色 */
    .nav ul li a { /* 子元素选择器  */
        color: skyblue;
    }
    /* 主导航栏和侧导航栏里面所有的文字都是14px,并且是微软雅黑 */
    .nav,.sitenav {
        /* font-size: 14px; */
        font: 14px  "microsoft yahei";
    }
    /* 主导航栏里面的一级菜单连接文字是绿色 */
    .nav>ul>li>a {
        color: green;
    }
    style>

head>
body>
    div  class="nav">
    ul>
        li>a href="#">公司首页a>li>
        li>a href="#">公司简介a>li>
        li>a href="#">公司产品a>li>
        li>a href="#">联系我们a>
        ul>
            li>a href="#">公司邮箱a>li>
            li>a href="#">公司电话a>li>
        ul>
        li>
    ul>
    div>
    div class="sitenav">
        div  class="site-1">左侧导航栏div>
        div  class="site-r">a href="#">登录a>div>
    div>
body>
html>

6：属性选择器

    style>
    /* 属性选择器中用中括号来表示 */
    a[title] {  /* 存在属性即可 */
        color: red;
    }
    input[type=text]

上一篇：CSS属性

下一篇：【论文阅读】Grad-CAM: Visual Explanations from Deep Networks via Gradient-based Localization

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：前端 CSS上
文章链接：http://soscw.com/index.php/essay/38693.html

亲，登录后才可以留言！