CSS 基础知识

qq_51425691

已于 2022-02-23 17:46:29 修改

阅读量262

点赞数

文章标签： css html

于 2022-02-23 17:19:45 首次发布

本文链接：https://blog.csdn.net/qq_51425691/article/details/123094784

版权

六 CSS应用

6.1标签选择器

美化网页结构HTML 样式CSS

CSS有两个主要的部分构成：选择器以及一条或多条说明

<!--ID选择器和类选择器的区别
1.类选择器好比人的名字，一个人可以有多个名字，同一个名字也可以被多个人使用
2.Id选择器好比人的身份正号码，全中国是唯一的，不得重复
3.最大的区别是使用次数、
4.修改样式 类，id和js搭配使用-->
ID

<!--Id选择器可以为标有特定id的HTML元素指定特定的样式
    HTML元素以Id属性来设置id选择器，CSS中Id选择器以#来定义
语法
   #id名{
       属性1：属性值1；
   }-->
   <!--样式#定义，结构id调用，只能调用一次，别人切勿使用-->
   <style>
       #pink {
           color: blue;
       }
   </style>
</head>
<body>
   <div id="pink">今年春节是</div>

 <title>基础选择器之类选择器</title>
    <!--类选择器可以单独选择
    类名 {
        属性1 ：属性值1；
    }-->
    <style>
        /*类选择器口诀：样式点定义，结构类（class)调用 一个或多个，开发最常用*/
        .red {
            color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">大大大</li>
        <li>默多克兰蔻</li>
        <li class="red">你几点开始</li>
        <li>名词解释从</li>
    </ul>
    <div class="red">记得那年年底</div>

<title>类选择器多类名</title>
    <!--简单理解就是一个标签有多个名字-->
    <!--多类名使用场景及方式 
        <div class="red font20">亚瑟</div>
        在标签class属性中写多个类名
        多个类名中间必须用空格分开
    -->
    <!--相同样式单独放在一个类中-->
    <style>
        .red {
            color: red;
        }
        .font {
            font-size: 35px;
        }
    </style>

</head>
<body>
    <div class="red  font" >刘德华</div>

 <title>标签选择器</title>
    <style>
        /*标签选择器：标签名  ,不能差异化显示，要变都变，*/
        p {
            color: blue;
        }
        div {
            color: blueviolet;
        }
        
    </style>
</head>
<body>
     <!--选择器分为基础选择器和复合选择器
        基础选择器是由单个选择器组成的，基础选择器又包括：标签选择器，类选择器，Id选择器和通配符选择器-->
        <p>男生</p>
        <p>男生</p>
        <p>男生</p>
        <div>女生</div>
        <div>女生</div>
        <div>女生</div>
</body>
</html>

 <title>通配符选择器</title>
    <style>
        /* *定义，代表选中页面所有元素*/

6.2 字体和字号

 <title>字体属性</title>
    <style>
        /*normal 默认值，不加粗的；bold 加粗，100-900，400=normal，700=bold，注意数字后不跟单位
         font-style 样式 斜体或者非斜体 normal 默认  ，
         <em></em> 倾斜字体*/
        body {
            font-size: 40px;
           
        }
        /*实际开发中显示数字*/
        .bold {
            font-weight: 700;
        }
        /*-标题元素需要额外设置大小*/
        h2 {
            font-family: 'microsoft yahei';
            font-size: 30px;
            font-weight: 400;
            font-style: normal;
            font-style: normal;
        }
        p {
            font-family:  '微软雅黑';
           font-style: italic;
            
        }
    </style>
</head>
<body>
    <!--CSS使用 font-family 属性定义文本的字体系列-->
    <h2>面对历史库存了多少</h2>
    <p class="bold">经常莫斯科的吗</p>
    <p>看见你的是</p>
    <p>电脑市场</p>
</body>
</html>

 /*复合属性，简写模式*/
        /*顺序严格按照 空格隔开，不需要的属性可以省略取默认值，但是size和family 不能省略
        font : font-style  font-weight font-size/line-height font-family;*/
<style>
        div {
         font ： italic 700 16px/20px microsoft yahei;
        }
        h3 {
            font :20px '黑体'
        }
</style>

6.3 文本属性

可定义文本外观，比如颜色，对齐文本，装饰文本，文本缩进，行间距

<title>CSS外观属性</title>
    <style>
        /*开发里三种表示颜色的方式
        预定义的颜色值，十六进制，RGB代码*/
        div {
          /*  color: black;*/
           /* color: #2eeb08;*/
            color: rgb(255,0,0);
        }
        /*对齐文本 text-align属性用于设置元素内文本内容的水平对齐方式*/
        div {
            text-align: center;
           }
           /*装饰文本 none默认，没有装饰线；underline下划线；overline上划线；line-through删除线*/
           div {
               text-decoration: underline;
           }
           /*文本缩进，通常是将首行进行缩进效果 text-indent
           em 是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小
           1em=16px*/
           p {
          /*  text-indent: 20px;*/
            text-indent: 2em;
            /*行间距  line: height 26px; */
            line-height: 26px;
           }
    </style>

6.4 CSS的引入方式

<!--CSS样式表可分为三类
行内样式表  内部样式表 嵌入式  外部样式表 链接式-->
 <title>内部样式表</title>
    <style>
        /*方便控制整个页面，一般放在头文件中，并没有实现结构与样式完全分离，在平时练习中常用，称为嵌入式引用
        控制一个页面*/
        div {
            color: aquamarine;
            font-size: 16px;
        }
    </style>
 
    
</head>
<body>
    <div>内部样式表写到HTML内部，将所有的CSS代码抽取出来，单独放到一个style中</div>
    <p style="color: brown; font-size: 16px;">行内样式表，在p标签内部直接进行修改,适合修改简单样式 控制一个标签</p>
</body>
</html>



 <title>外部样式表</title>
     <link rel="stylesheet" href="style.css">
    <!--同一级路径直接引入  输入link然后加tab键 直接快捷输入
    控制多个页面-->
  </head>
 <body>
     <div>
          外部样式表，实际开发都是外部样式表，适用于样式比较多的情况，核心是样式单独写到CSS文件中，之后会把CSS文件引入到HTML页面中使用
引入外部样式表分为两步 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中  2.在HTML页面中，使用link标签引入这个文件
<!-- <link rel ="stylesheet" href="css文件路径"-->
     </div>
 </body>
 </html>

6.5 谷歌浏览器

1.打开调试工具

打开谷歌浏览器，按下f12或者右击页面空白处----检查

element 元素。左边HTML，右边css

如果有黄色感叹号提示，则是样式属性书写错误

七 CSS应用二

7.1Emmet语法

1. 生成标签直接输入标签名按tab
2. 生成多个相同标签 div*3
3. 父子级关系 ul>li
4. 兄弟关系 div+p
5.生成带有类名或者id 名字的，直接写.demo或者#two tab键就可以 span.two p#one
直接写 .demo 生成的是div中的类名demo
6.如果生成的div类名是有顺序的，可以用自增符号$
7.div{直接写文字就好}

7.1.1 快速生成CSS样式语法

1. w200  按tab 可以生成width:200px;
2. lh26  tab  line-height:26px;
3.tac  简写，第一个字母

7.1.2 快速格式化代码

快速格式化代码 shift+alt+f

7.2 CSS复合选择器

常用的复合选择器包括后代选择器子选择器并集选择器伪类选择器

7.2.1 后代选择器

又叫做包含选择器，可以选择父元素的子元素

  <style>
        ul li {
            color: pink;
        }
        ul li a {
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>属性</li>
        <li>属性</li>
        <li>属性</li>
      <li><a href="#">链接</a></li>
    </ul>
<ul class="nav1">
    <li></li>
    <li></li>
    <li></li>
</ul>
    <ol>
        <li>孩子属性</li>
        <li>属性</li>
        <li>属性</li>
    </ol>

7.2.2 子元素选择器

只能选择某元素的最近一级子元素

 <style>
      
        div > a {
            color: pink;
        }
    </style>
</head>
<body>
   <div class="nav">
       <a href="#">我是儿子</a>    /*只有儿子变红色*/
       <p>
           <a href="#">我是孙子</a>
       </p>
   </div>

7.2.3 并元素选择器

可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器，通过逗号进行连接</title>
    <style>
        div,
        p {
            color: pink;
        }
        span，
        p,
        .pig li {
            color: red;
        }
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>佩奇</li>
        <li>乔治</li>
        <li>小兔贝瑞卡</li>
    </ul>

7.2.4 伪类选择器（复杂）

最大的书写特点是前面用冒号（：）表示

用于向某些选择器添加特殊的效果，比如给链接添加效果

伪类选择器有很多，比如有链接伪类，结构伪类

链接伪类选择器

a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover  /*选择鼠标指针位于上的链接*/
a:active  /*选择活动链接（鼠标按下未弹起的链接）*/

链接伪类选择器实际工作中的写法
/*a 是标签选择器 所有的链接 */
a {
  color :gray;
}
/* :hover是链接伪类选择器 鼠标经过变色 */
a:hover {
color:red; /*鼠标经过的时候由原来的灰色变成了红色 */
}

 <title>链接伪类选择器</title>
    <style>
        /*四种顺序不能更改  LVHA
        链接样式需要单独指定，链接在浏览器中具有单独样式*/
        /*未被访问的链接*/
        a:link {
            color: pink;
            text-decoration: none;
        }
        /*a:visited /*选择所有已被访问的链接*/
        a:visit {
            color: red;
        }
/*a:hover  /*选择鼠标指针位于上的链接*/
a:hover {
    color: aquamarine;
}
/*a:active  /*选择活动链接（鼠标按下未弹起的链接）*/
a:active {
    color: blue;
}
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.baidu">jcdkv</a>
</body>
</html>

focus 伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，这个选择器主要针对表单元素

input:focus {
background-color:yelllow;
}


<title>focus伪类选择器</title>
    <style>
        input:focus {
            color: red;
        }
    </style>
</head>
<body>
  <input type="text">
  <input type="text">
  <input type="text">
</body>

7.3 CSS元素显示模式

7.3.1 元素显示模式简介

网页标签很多，不同地方用到不同类型的标签

元素显示模式就是元素（标签）以什么方式进行显示

比如div可以自己占一行，比如一行可以放多个span

HTML元素一般分为块元素和行内元素两种类型

7.3.2 块元素

文字类的元素不能使用块级元素
<p> 标签主要用于存放汉字，因此<p> 标签里面不能放块级元素，特别是不能放div
    同理 <h1>
        里都是文字类块级标签，里面也不能放其他块级元素
</h1>

h1 h2 p div ul ol li div是典型

块元素特点：

自己独占一行
高度宽度外边距内边距都可以控制
宽度默认容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或块级元素

注意：

文字类的元素不能使用块级元素
<p> 标签主要用于存放汉字，因此<p> 标签里面不能放块级元素，特别是不能放div
    同理 <h1>
        里都是文字类块级标签，里面也不能放其他块级元素
</h1>

 <title>块元素 </title>
        <style>
            div {
                color: red;
                background-color: pink;
                width: 200px;
                height: 200px;
            }
        </style>
   
</head>
<body>
    <div>哒哒哒打</div>武松
</body>

7.3.3 行内元素

常见的行内元素有 a strong b em i del ins u span 等，其中span是最典型的行内元素

行内元素的特点

相邻行内元素在一行上，一行可以显示多个
宽高直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意

链接里面不能再放链接

特殊情况下a 里面可以放块级元素，但是给a转换一下块级模式最安全
```
 <title>行内元素</title>
    <style>
        span {
            background-color: red;
            width: 200px;
            height: 500px;
        }
    </style>
</head>
<body>
    <span>能坚持</span> <strong>心内科</strong>
</body>
</html>
```
7.3.4 行内块元素

在行内块元素上有几个特殊的标签

img input td

他们同时具有块元素和行内元素的特点

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）

默认宽度就是他本身内容的宽度（行内元素特点）

宽度行高外边距以及内边距都可以控制（块级元素特点）

 <title>行内块元素</title>
   <style>
       input {
           width: 300px;
           height: 50px;
       }
   </style>
</head>
<body>
    <input type="text">
    <input type="text">
</body>
</html>

7.3.5 显示模式的转换

简单理解一个模式的元素需要另外一种模式的特性

比如想要增加链接a的触发范围

转换为块元素：display:block;

转换为行内元素：display:inline

行内元素转化为行内块元素 display: inline-block;

 <title>Document</title>
    <style>
        a {
            width: 200px;
            height: 100px;
            background-color: rgb(18, 223, 69);
            display:block;
        }
        div {
            width: 200px;
            height: 400px;
            background-color: rgb(182, 29, 29);
            display: inline;
        }
        span {
            width: 512px;
            height: 121px;
            background-color: rgb(24, 27, 192);
            display: inline-block;
        }
    </style>
</head>
<body>
    <a href="#">行内元素转化为块元素</a>
    <a href="#">行内元素转化为块元素</a>
    <div>块元素转化为行内元素</div>
    <div>块元素转化为行内元素</div>
    <span>行内元素转化为行内块元素</span>
    <span>行内元素转化为行内块元素</span>
</body>
</html>

7.3.6 工具使用 snipaste

是一个简单但是强大的截图工具

也可以让你将截图贴回到屏幕上

常用快捷方式

1.F1可以截图，同时测量大小，设置箭头书写文字

2.F3在桌面置顶显示

点击图片，alt可以取色（按下shift可以切换取色模式）

按下esc取消图片显示

7.3.7 小米侧边栏简单案例

 <title>小米侧边栏案例</title>
  <style>
       a:hover{
        background-color:#ff6700;
        }
        a {
            background-color: #55585a;
            display: block;
            width: 230px;
            height: 40px;
            text-decoration: none;
            text-align: center;
            color: white;
            font-size: 14px;/*调整字体大小*/
            text-indent: 10px;/*段落首行间距  两个字体 */
        }
  </style>
</head>
<body>
    <a href="#"> 手机 电话卡</a>
    <a href="#"> 电视 盒子</a>
    <a href="#"> 笔记本 平板</a>
    <a href="#"> 出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#"> 耳机 音响</a>
   
</body>

7.3.8 单行文字垂直居中

单行文字垂直居中

CSS没有提供垂直居中的代码

解决方案 : 让文字行高等于盒子的高度

原理

行高=上空+文字本身高度+下空

qq_51425691

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础知识

六 CSS应用6.1标签选择器美化网页结构HTML 样式CSSCSS有两个主要的部分构成：选择器以及一条或多条说明ID<!--Id选择器可以为标有特定id的HTML元素指定特定的样式 HTML元素以Id属性来设置id
复制链接

扫一扫