CSS简单介绍和简单使用

最新推荐文章于 2024-07-25 15:44:34 发布
最新推荐文章于 2024-07-25 15:44:34 发布
阅读量110 收藏
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FrankieCao/article/details/130607461
版权

目录

一、概述

1.CSS名称

2.作用

二、操作

1.CSS嵌入HTML

（1）嵌入HTML标签

（2）内联

（3）外部

（4）优先级

2.CSS选择器

（1）HTML目标

（2）CSS样式

3.常用的CSS设置 

1.给表格设置边框

2.给块设置边框

一、概述

1.CSS名称

Cascading Style Sheet：层叠样式表

2.作用

  • 布局：控制HTML元素在页面上显示的位置。
  • 样式：控制HTML元素显示的边框、颜色、边距。。。
  • 动态效果：鼠标悬停的时候改变颜色

二、操作

1.CSS嵌入HTML

（1）嵌入HTML标签

不推荐，会导致样式设置很分散，不利于维护。

（2）内联

使用Style标签，设定HTML页面样式。

<style>
    div{
        border: 2px solid blueviolet;
        width: 800px;
        font-family: 楷体;
        color: deeppink;
        font-size: 100px;
        <!--设置居中的两种方式-->
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
  </style>
</head>
<body>
<div>白日依山尽，</div>
<div>黄河入海流。</div>
<div>欲穷千里目，</div>
<div>更上一层楼。</div>
</body>
</html>

（3）外部

1.创建CSS文件，直接写CSS

li{
    border: 2px dashed greenyellow;
    text-align: center;
    width: 300px;
}
li:hover{
    background-color: yellow;
}

2.在HTML中引入

<!-- link 标签：引入外部 CSS 文件 -->
<!-- ref 属性：表示引入的外部资源是个 CSS 样式文件 -->
<!-- href 属性：指定外部 CSS 文件的路径 -->
<link rel="stylesheet" href="style/color.css">

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

------------------------------------------------------

<ol>
    <li>iasdhfakjdhflahsdj</li><br>
    <li>oernsdfvherkjcxiovj</li><br>
    <li>hoiafjhnbjweqrdfvdg</li><br>
</ol>
</body>
</html>

（4）优先级

如果三种标签同时设定同一个标签，则最近的生效

2.CSS选择器

用来找到目标标签

（1）HTML目标

<div>div标签</div>
<div class="big">div标签</div>
<p>p标签</p>
<p class="big">标签</p>
<li>li标签</li>
<ol>ol标签</ol>
<ul>ul标签</ul>

（2）CSS样式

/* 使用逗号分开的多个选择器使用相同设置 */
/* 标签选择器：使用 HTML 标签名作为定位依据 */
div,p {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

/* 类选择器：针对相同的 class 属性值做样式设置 */
.big {
    font-size: 20px;
    background-color: aqua;
}

/* id选择器：根据某一个具体的 id 值，设定对应的具体一个标签 */
/* 在整个 HTML 页面中，id 值不能重复 */
#targetTag {
    color: green;
    font-weight: bold;
    font-style: italic;
}

      #abc{
          color: blue;
          font-family: "Times New Roman";
          background-color: yellow;
          font-style: italic;
      }
---------------------------------------------------
      <p id="abc">fjikahsdbjk</p><br>

3.常用的CSS设置 

1.给表格设置边框

table {
    border: 1px solid black;
    border-collapse: collapse;
}

th,td {
    border: 1px solid black;
}

2.给块设置边框

div,p {
    border: 1px solid black;
    width: 100px;
    height: 100px;
}

FrankieCao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单蓝色介绍CSS网页模板
01-14
【简单蓝色介绍CSS网页模板】是一个适用于初学者和快速原型设计的网页模板，它强调了简洁的设计风格和蓝色调的视觉效果。这个模板基于CSS（层叠样式表）技术，用于控制网页的布局和样式，使得网页看起来既专业又美观...
html+css简单介绍与使用
07-14
综上所述，"html+css简单介绍与使用"这个主题覆盖了HTML的基本结构和标签，CSS的样式定义以及JavaScript的基础和交互性。通过这些文件的学习，你可以掌握创建静态网页的基本技能，并为进一步学习动态网页开发打下...
简单介绍CSS hack的使用
01-19
但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。 1.IE条件注释法该方法安全性好，但是不...
使用CSS实现图片分割效果的简单方法介绍
12-13
我们来看一个例子，大家肯定能明白css是怎么样实现分割图片的。 CSS Code复制内容到剪贴板 <HTML>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />  ...
flex：1
m0_47999208的博客
07-25 240
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS相关记录
oThrowsException的博客
07-24 610
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS的常见难见
weixin_62432037的博客
07-24 999
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
Programming in the Large CSSE2002
最新发布
w976j_的博客
07-25 443
❼❼❼SheePComponents❼❼Savingnotnot).TheandSeeSee。
Web响应式设计———1、Grid布局
Violetto_Yan的博客
07-21 365
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
CSS基础入门 —— 打造网页的华丽外衣
2301_79375313的博客
07-25 351
CSS不仅是网页的装饰工具，更是实现网页布局、交互设计和响应式设计的关键技术。掌握CSS，就是掌握了打开网页美学与功能性的大门。希望本文能为您的CSS学习之旅提供一个良好的起点。
第二十八天 CSS之字体属性
out_stand_ing的博客
07-21 364
前端大佬的修炼之路 筑基期第五层
【前端学习笔记】CSS基础一
qq_46056318的博客
07-24 513
一、什么是CSS 1.CSS 介绍 CSS（Cascading Style Sheets，层叠样式表）是一种用来控制网页布局和设计外观的样式语言。它使得开发者可以分离网页的内容（HTML）和表现形式（样式），提高了内容的可访问性，提供了更强的灵活性和控制性，也使得网页的维护和修改变得更加容易。 CSS 如何与 HTML 一起工作： 结构与样式分离： HTML 用于构建网页的结构，定义网页的内容，如文本、图片、链接等。 CSS 用于定义这些结构的表现形式，比如布局、颜色、字体大小和样式等。 引入方
css in js 相比较 css modules 有什么好处？
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 162
CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案，它们各有优势。动态样式：CSS-in-JS 可以轻松创建基于 props 或状态的动态样式，更灵活地处理复杂的样式逻辑。无需额外的构建配置：大多数 CSS-in-JS 解决方案可以直接使用，不需要额外的 webpack 配置。无需命名约定：CSS-in-JS 自动生成唯一的类名，避免了命名冲突，不需要遵循特定的命名规范。运行时优化：一些 CSS-in-JS 库支持运行时的样式优化，只加载当前渲染所需的样式。
【CSS】1 像素问题
小秀的博客
07-24 147
造成这个问题的原因是由于⾼分辨率屏幕的像素密度⽐传统的屏幕要⾼，所以在屏幕上显示的⼀个 CSS 像素对应的物理像素个数也会相应地增多，当使⽤ CSS 中的 1px 来设置边框或者细线时，实际上渲染出来的线条在屏幕上会被拆分为多个物理像素，从⽽导致看上去更粗。CSS 中的 1 像素问题指的是在⾼分辨率屏幕上显示的 1 像素边框或者细线在实际显示时会⽐ 1 个物理像素更宽或更粗，从⽽导致边框或者细线看上去⽐预期的更粗或者更宽。
CSS 的@media规则，响应式的一种解决方案
读心悦
07-21 228
CSS的@media规则是一种条件语句，它允许你根据不同的媒体类型和条件来应用不同的样式规则。这使得你能够根据不同的屏幕尺寸、分辨率、设备方向等条件来定制网页的布局和样式，从而创建响应式和适应性强的网站。
CSS 的环境变量函数env()
读心悦
07-21 267
在CSS中，env()函数并不是传统意义上的“环境变量”函数，如你在编程语言中可能遇到的那样。相反，env()是CSS中的一个函数，它用于访问由宿主环境（如浏览器）提供给CSS的自定义属性（也称为环境变量）。这些环境变量通常用于在Web开发中提供特定的上下文信息，比如设备的物理像素比（DPR）或用户代理样式表（User Agent Style Sheets）中的特定值。然而，需要注意的是，env()
css更改图片颜色
程序员
07-25 65
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
常见的CSS属性（一）——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值
weixin_64294248的博客
07-25 914
元素的继承性是指给父元素设置了某些属性，子元素或后代元素也会有作用。
WebKit的文本排版艺术：探索CSS中的高级排版特性
zhugedali_的博客
07-25 398
通过将 background-clip 设置为 text ，并结合 -webkit-text-fill-color ，可以实现文本的渐变效果。WebKit 中的 -webkit-text-stroke 属性用于为文本添加描边效果。例如， -webkit-text-stroke: 2px #ff0000;
简单介绍html和css3
05-22
它主要用于描述一个网页的结构和内容，通常由一系列的标签和属性组成，这些标签和属性可以用来定义页面中的文本、图像、链接、...同时，CSS3 还支持响应式布局，使得网页可以适应不同的设备和屏幕尺寸，提高用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值