首页 > 其他分享 >CSS样式表

CSS样式表

时间：2022-09-28 10:12:44浏览次数：55  
标签：color 标签 元素 样式表 font 选择器 CSS

CSS也是一种标记语言

CSS样式规范

CSS规则主要由两个主要的部分组成：选择器以及一条或多条声明。

  • css写在head标签中，具体语句写在<style></style>中
  • 选择器是用于指定CSS样式的HTML标签
  • 属性以“键值对”的形式出现
  • 属性之间用分号隔开
 <style>
    p{
        color: red;
        font-size: 25px;
    }
</style>

CSS选择器

标签选择器

p {
  color: green;
  font-size: 25px;
}
div {
    color: pink;
}
  • 只能修改全部的标签，无法进行差异化的修改

类选择器

可以差异化选择不同的标签，单独选择一个或者几个标签

.red {
    color: red;
}
.green {
    color: gold;
    font-size: 50px;
}
  • 指定样式可以使用多个类，中间用空格隔开

id选择器

  • 通过id来设置属性，在CSS中以"#"来定义
  • id选择器一般用于设置页面中的唯一值，配合JS使用
#name {
    font-size: 25px;
    color: blue;
}

通配符选择器

  • 在CSS中以一个"*"来定义
  • 不需要指定，自动页面中所有元素修改为指定样式
* {
  color: red;
}

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和字体样式

字体系列

  • 各个字体必须用逗号隔开
  • 多个字体为了保证兼容性（在任何用户的浏览器都能正确显示）
p {
  font-family: "微软雅黑";
}
div {
  font-family: "Microsoft Yahei",'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

字号大小

  • px（像素）是网页中最常用的单位
  • 谷歌浏览器的默认大小是16px
  • 不同的浏览器字体大小可能不同，开发中尽量给一个明确值，不要使用默认大小
  • 可以给body指定整个页面的大小
  • 标题标签比较特殊，需要单独指定大小
body {
  font-size: 16px;
}
h2 {
  font-size: 50px;
}

字体粗细

  • normal默认值不加粗，bold加粗
  • normal属性可以设置为400，加粗可以设置为700
  • 实际开发中更推荐使用数字设置属性
.bold {
	/* font-weight: bold; */
  font-weight: 700;
}
.normal {
  /* font-weight: normal; */
  font-weight: 400;
}

文字样式

  • 使用font-style属性设置文本的风格
  • 很少给字体加斜体，反而要给倾斜字体变得不倾斜
em {
  font-style: normal;
}
<em>把倾斜字体变得不倾斜</em>

字体复合属性

  • 简写复合属性的时候，顺序不能乱
  • 复合属性必须至少有字号和字体
div {
  /* font-style: italic;
  font-weight: 700;
  font-size: 16px;
  font-family: "Microsoft Yahei"; */
  /* 复合属性，使用简写的方式 */
  font: italic 700 16px "Microsoft Yahei"
}
.divSimple {
 /* 必须有字号和字体 */
  font: 50px "黑体";
}
<div>这个是font复合属性的文字1</div>
<div class="divSimple">这个是font复合属性的文字2</div>

文本装饰

  • none没有装饰线最常用
  • text-indent是缩进，2em表示缩进两个字符（缩进的长度是相对的，也可以用px）
a {
  text-decoration: none;
  color: black;
}
p {
  text-indent: 2em;
}
<p>这个是段落文字</p>
<a href="#">这是一个链接</a>

CSS 引入方式

CSS样式表可以分为三大类

  • 行内样式表（行内式）
  • 内部样式表（嵌入式）
  • 外部样式表（链接式）

行内样式表

  • 书写方便权重高
  • 其实就是设置的标签属性
  • 书写繁琐不推荐使用，一般对当前元素进行简单样式时使用
<p style="color: red;font-size: 30px">行内样式演示</p>

内部样式表

在HTML文件的CSS样式称为内部样式表

<style>标签理论上可以放在HTML文档的任何地方，一般会放在<head>标签中

  • 通过此种方式可以方便控制当前整个页面中元素的样式
  • 代码结构清晰，但是没有实现结构与样式的完全分离
  • 嵌入式，练习时候常用

外部样式表（最常用）

  • CSS文件和布局文件分离使用标签引入样式
  • rel指的是文档与链接文档之间的关系，"stylesheet"指的就是样式表，href指的就是路径
<link rel="stylesheet" href="style.css">

CSS复合选择器

后代选择器

  • 在标签发生嵌套时使用，可以选择父元素里面的子元素
  • 所有的后代元素都会引用选择器的样式
<style>
ol li {
  color: blue;
}
ol li a {
  color: deeppink;
}
</style>

<ol>
  <li>后代选择器test</li>
  <li>后代选择器test</li>
  <li>后代选择器test</li>
  <li><a href="#">test2</a></li>
</ol>
<ul>
  <li>这是test</li>
  <li>这是test</li>
  <li>这是test</li>
  <li>这是test</li>
  <li>这是test</li>
</ul>

子选择器

只能选择作为某元素最近一级的元素（简单理解就是子元素）

 ul>li {
  color: red;
}
<ul>
  <li>儿子</li>
  <li><a href="#">孙子</a></li>
  <p><a href="#">孙子</a></p>
</ul>

并集选择器

  • 可以选择多组标签同时为他们定义样式
  • 一般喜欢竖着写
<style>
/* 并集选择器 */
div, 
p, 
.pig {
  color: deeppink;
}
</style>
  
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
  <li>小猪佩奇</li>
  <li>pigdaddy</li>
  <li>pigmom</li>
</ul>

链接伪类选择器

  • 可以给链接添加特殊的效果
  • 开发过程中顺序不能乱，遵循"LVHA"的顺序，如下
<style>
  /* 未访问的链接 */
  a:link {
      color: black;
      text-decoration: none;
  }
  /* 访问过的链接 */
  a:visited {
      color: orange;
  }
  /* 鼠标经过链接时 */
  a:hover {
      color: skyblue;
  }
  /* 鼠标按下没松开 */
  a:active {
      color: green;
  }
</style>

<a href="#">小猪佩奇</a>

focus伪类选择器

选中元素时显示的效果

<style>
input:focus {
  background-color: deeppink;
}
</style>

<input type="text"> <input type="text"> <input type="text">

CSS元素显示模式

块元素

常见的块元素有<h1>~<h6>``<p>``<div>``<ul>``<ol>``<li>等，其中<div>标签最为典型

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

注意点

  • 文字类的元素内不能使用块级元素

  • 标签主要用于存放文字，因此

    里面不能放块级元素，特别是

    标签
  • 同理<h1>~<h6>等，也不能放其他块级元素

行内元素

有很多，<span>标签是最典型的行内元素

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

注意点

  • <a>标签链接里面不能再放链接
  • 特殊情况<a>标签里面可以放块级元素，但是给<a>标签转换显示模式最安全

行内块元素

在行内元素中有几个特殊的标签，<img /> <input /> <td>它们同时具有块元素和行内元素的特点

  • 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
  • 默认宽度是它本身内容的宽度（行内元素特点）
  • 高，宽，外边距以及内边距都可以控制（块级元素特点）

CSS元素显示模式

  • 元素的显示模式可以转换为任意的行内元素，块级元素，和行内块元素
  • 设置的属性是display:block/inline/inline-block

CSS背景

常用如下，其他查阅文档

<style>
  div {
      height: 300px;
      width: 300px;
      background-color: pink;
      background-repeat: no-repeat;
      background-image: url("images/logo.png");
      background-position: top;
  }
</style>

<body>
    <div></div>
</body>

背景图片

具体代码和效果如图所示
image.png

 <style>
  h3 {
      width: 118px;
      height: 40px;
      background-image: url(images/icon.png);
      background-repeat: no-repeat;
      background-position: left;
      background-color: pink;
      font-size: 12px;
      font-weight: 400;
      line-height: 40px;
      text-indent: 1.5em;
  }
</style>

<body>
  <h3>成长守护平台</h3>
</body>

image.png

 <style>
  body {
      background-image: url(images/bg.jpg);
      background-position: center 40px;
      background-attachment: fixed;
      color: #ffff;
      font-size: 20px;
  }
</style>

<body>
  <p>段友出征，寸草不生</p>
  <p>段友出征，寸草不生</p>    
  <p>段友出征，寸草不生</p>    
  <p>段友出征，寸草不生</p>    
  ...
</body>

背景属性的混合写法

  • 实际开发中习惯简写背景属性
  • 没有特定的书写顺序，一般约定的顺序是
    • background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
    • 这种写法更加提倡

CSS三大特性

CSS的三大特性是：层叠性、继承性、优先级

层叠性

  • 给相同的选择器设置相同的样式，下面的样式会覆盖上面的样式，但设置不同的样式则会保留
    • 样式冲突：就近原则，哪个样式离结构近，就执行哪个样式
    • 样式不冲突：不会层叠

继承性

  • 子标签会继承父标签的某些样式，比如颜色字号等
<style>
  div {
      color: red;
  }
</style>

<body>
<div>
  <!-- 会继承div父标签的颜色属性 -->
  <p>CSS继承</p>
</div>

优先级

当同一个元素指定多个选择器，就会有优先级的产生

  • 选择器相同，则执行层叠行
  • 选择器不同，则根据选择器权重执行、
  • 作用范围越大权重越低（!important除外）
  • 指定的范围越小权重越高

image.png

权重叠加

涉及到复合选择器，则会有权重叠加，需要计算权重

盒子模型

网页布局本质

  • 先准备好相关的网页元素，网页元素基本都是盒子Box
  • 利用CSS设置好盒子样式，然后摆放到相应位置*
  • 往盒子里面装内容

网页布局核心本质：就是利用CSS摆盒子

盒子模型组成

  • border（边框）
  • content（内容）
  • padding（内边距）
  • margin（外边距）

盒子模型边框border

div {
  width: 300px;
  height: 200px;
  /* 边框粗细一般单位用px */
  border-width: 5px;
  /* 实线边框：solid 虚线边框：dashed 点线边框 dotted  */
  border-style: dashed;
  border-color: skyblue;
}

边框的复合写法

div {
  width: 300px;
  height: 200px;
	/* 边框样式复合写法（简写） 没有顺序*/
  border: red solid 5px;
}

甚至可以每个边单独设置颜色和大小，边框会影响盒子的大小
需求：上边框是红色，其余是蓝色

.red {
  height: 200px;
  width: 200px;
  border: blue solid 5px;
/* 层叠性 */
  border-top: red solid 10px;
}

padding

padding的复合写法
image.png
如果盒子本身没有指定width/height的大小，则此时padding不会撑开盒子大小

margin

  • 用于设置外边距，即盒子与盒子之间的距离
  • 行内元素或行内块元素水平居中时，给父元素添加text-align:center即可

外边距合并

  • 尽量给相邻的盒子只添加一个margin值

image.png

嵌套块元素塌陷

image.png

解决方法

  • 为父元素定义上边距
  • 为父元素添加上边框（边框）
  • 为父元素添加overflow:hidden（比较常用，不会使得盒子变大）

清除内外边距

  • 一般网页元素都会带有默认的边距
  • 用通配符选择器清除默认的边距
* {
    padding: 0;
    margin: 0;
}

TIPS

  • 为什么要用那么多不同的标签
    • 标签是有语义的，要在合适的地方用合适的标签，比如标题就用h 大量文字段落就用p
  • 为什么起很多的类名
    • 可以更好的找到盒子，选取盒子更容易，后期维护也更加的方便
  • 什么时候用 margin 什么时候用 padding
    • 可以混用，各有优缺点，根据情况来使用
  • 布局有很多实现方式，然后做出自己的风格

圆角边框

设置圆角边框的属性是border-radius数值越大，弧度越大

圆角边框的使用

可以让盒子变成一个圆或者是椭圆

border-radius: 50%;

border-radius: 盒子高度的一半px;

还可以设置每个角不同的圆角

border-radius: 10px80px;

image.png

盒子阴影（重点）

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影，盒子阴影不占用空间

语法

image.png

文字阴影

再CSS3中，可以使用text-shadow属性将阴影应用于文字
image.png

标签：color,标签,元素,样式表,font,选择器,CSS
From： https://www.cnblogs.com/akaazheng/p/16734608.html

相关文章

  • 尚硅谷-JavaWeb CSS
    1.CSS：层叠样式表单，用于（增强）控制网页样式并允许将样式信息域网页内容分离的一种标记性语言；2.CSS和HTML的组合方式：第一种：在标签的style属性上设置"key:valuevalue"，......
  • CSS基础（基于黑马程序员视频的学习笔记）
    一、CSS选择器1、标签选择器选中所有的该标签标签名{CSS属性名:属性值;}2、类选择器.类名{CSS属性名:属性值;}所有标签都有class属性，class属性的属......
  • css语言
    css：样式表、级联样式表、层叠样式表css写在style标签里面，放在head标签中；大括号中写键值对语法color：文字颜色Font-family：字体Font-size：字号text-indent：首行缩进单位......
  • 前端三件套 HTML+CSS+JS基础知识内容笔记
    HTML基础目录HTML基础HTML5标签doctype标签html标签head标签meta标签title标签body标签文本和超链接标签标题标签段落标签换行标签水平标签强调标签图片标签与超链接标签......
  • CSS3 实现 网页顶部进度条
    有朋友们问网页顶部进度条 如何应用，现在github大部分国外网站都在用，这个效果可以使用现成的一些插件比如 ​​这个​​​，​​这个​​​，还有​​这个​​。比如youtobe......
  • [css]一个块格式化上下文(BFC)阻止外边距重叠的示例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>*{margin:0;paddin......
  • CSS快速入门
    1.快速入门​ Style的使用有三种方法：​ 方式一：在标签内直接写CSS样式。​ ​ 方式二：在head标签里面使用（把字体设置为红色）​ ​ 方式三：在文件外写CSS样式，使用Link......
  • CSS0027： div 倒角效果
    1，<divid="test"></div>#test{display:inline-block;width:100px;height:100px;background:linear-gradient(135d......
  • 58 字节的 CSS 几乎在任何地方看起来都很棒
    58字节的CSS几乎在任何地方看起来都很棒58bytesofCSStolookgreatnearlyeverywhereW在制作这个网站时，我想要一种简单、合理的方式让它在大多数显示器上看起......
  • 见微知著，从两道有意思的 CSS 面试题，考察你的基础
    今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下：<div><pid="a">FirstParagraph</p></div>样式如下：p#a{color:green;}div::first-line{......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99