css基础内容1

于 2024-03-07 18:35:43 发布
阅读量909 收藏 21
点赞数 19
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingcheng_123456/article/details/136542121
版权

c9fa4efdf4d842cfb13a247aa8406c5b.pngCSS注释以 /* 开始, 以 */ 结束, 实例如下:

 

添加方法

1.行内添加

在body内添加

属性名：style

 

<body>

<p style="color:red;front-size:12px"> 啦啦啦</p >

</body>

以键值对 形式存在 多个属性时 中间用分号隔开

2.内嵌样式

先写style 属性

然后在style 内写

 

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    p{

    color: red;

    front-size:12px;

    }

  </style>

</head>

<body>

<p> 啦啦啦</p >

</body>

优先级 行内>内嵌

 

2daa39b6fd1745cb978f631c45af76a4.png

 

标签选择器

标签选择器 跟内嵌样式差不多

现在style属性内定义上

然后在引用

 

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    body{

    background-color: #ccc;

    text-align:center;

    font-size:12px;

    }

    h1{

    font:"黑体";

    font-size:20px}

    p{color:red;

    font-size:16px;}

    hr{width:200px}

  </style>

</head>

<body>

<h1>标题</h1>

<hr>

<p>正文的段落</p >

版权所有

</body>

 

 

类别选择器

类别选择器 前面有个. 并且用到class属性 可以多次引用

 

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    p{

    font-size:12px;

    }

    .one{

    font-size:18px;

    }

    .two{

    font-size:24px;

    }

  </style>

</head>

<body>

<p class="one">类别1</p >

<p class="one">类别1</p >

<p class="two">类别2</p >

<p class="two">类别2</p >

<p >普通段落的文字</p >

</body>

按住alt +鼠标左键 可以一同填写

 

 

id选择器

前面用#

属性是id

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    #one{font-size:12px;}

    #two{font-size:14px;}

  </style>

</head>

<body>

<p id="one"> 文字1</p >

<p id="two"> 文字2</p >

</body>

 

与类别标签不同的是 id 标签不能重复使用

 

集体声明：

所谓集体声明

就是把属性值相同的 写在一起

并且 style有个属性 style type="text/css“

 

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style type="text/css">

    h1,p{

    text-align: center;}

 

  </style>

</head>

<body>

<h1>欢迎访问网坛</h1>

<p>欢迎访问网坛</p >

</body>

 

 

全局声明

全局声明 指统一修改样式

前面用个*

 

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style type="text/css">

    *{

    text-align: center;}

  </style>

</head>

<body>

<h1>欢迎访问网坛</h1>

<p>欢迎访问网坛</p >

<h2>欢迎访问网坛</h2>

 

</body>

 

 

嵌套声明

用p 和span组成

一行话内有不同的样式

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style type="text/css">

    p span{

    color:red;}

  </style>

</head>

<body>

<p><span> 天使投资</span> 是投资的一部分</p >

</body>

591cc4309efe4134a5433772dad363a3.png

 

css文本样式fe988ca022534440986b0a609a420b88.png

 

颜色c69a45890b404a3db0429f2bfd115b8a.png

 

，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB 

 

文本a9c0ca0179e54c388713d43b39ada8b7.png

<style>

    h1{letter-spacing:2px; /*设置字符间距为2像素/*}

    h2{letter-spacing:-5px; /*设置字符间距为-2像素*/}

    p{font-size:14px;

    line-height:2em; /* 设置行高*/}

  </style>

</head>

<body>

<h1>标题内容</h1>

<h2>文本段落主要内容</h2>

<p>这是web前端开发课程</p >

</body>

</html>

 

装饰线 对齐方式

<style>

    h1{text-decoration: overline; /* 上方*/}

    h2{text-decoration: underline; /* 下划线*/}

a{text-decoration: none; /* 去除下划线*/}

    h3{text-decoration: line-through; /* 删除线*/}

    .one{text-align:center; /*居中*/}

    .two{text-align:left; /*居左*/}

    .three{text-align:right; /*居右*/}

  </style>

</head>

<body>

<h1>标题文字</h1>

<h2>标题文字</h2>

<h3>标题文字</h3>

<p class="one"> 居中对齐</p >

<p class="two">左对齐</p >

<p class="three">右对齐</p >

<ul>

    <li><a href=" ">链接1</a ></li>

    <li><a href="#">链接2</a ></li>

    <li><a href="#">链接3</a ></li>

</ul>

</body>

</html>

 

12bc5775512b434d934b9a854a478b35.png

 

字体

9cb05be232a94941af4590f95a37cc25.png

638d1b2b26804b9a816146d5d88016c4.png 

 

链接的四种状态86c8e588a7c4435da6f89194c66df8ba.png 

 

链接的四种状态

<style>

    a:link{text-decoration: none;color: #333333

    /*未访问*/}

    a:visited{text-decoration:none;

    color:#930;/*已访问*/}

    a:honver{text-decortation:underline;

    color:#ff0000;/*鼠标悬停*/}

    a:active{text-decoration:none;

    color:#03c;/*鼠标点击*/}

  </style>

</head>

<body>

<a href="#">我有不同的状态</a >

</body>

</html>

 

 

列表和表格

afafea3bd7dd4a56be9ab77ed818d63b.png

b6885b76ac57491283183114d0ddddcb.png 

 

<style type="text/css">

 .inside {

 list-style-position: inside

 }

 .outside {

 list-style-position: outside

 }

 </style>

</head>

<body>

<ul class="inside">

 <li>HTML——网页结构</li>

 <li>CSS——网页样式</li>

 <li>JS——网页交互</li>

 </ul>

 <ul class="outside">

 <li>HTML——网页结构</li>

 <li>CSS——网页样式</li>

 <li>JS——网页交互</li>

 </ul>

</body>

88b9e0f0cb564754b06fc9a9682cc708.png

0771f753c3984c7ab3e91316d6b11291.png 

 

 

积偶选择器f12a49b9a0514df49646f5d5e162ea2d.png

 

qingcheng_123456
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS基础知识.docx
07-23
CSS 基础知识总结 一、CSS 盒子模型 CSS 盒子模型是指浏览器对 HTML 元素进行渲染和布局的方式。主要有两种盒子模型，即 W3C 盒子模型和 IE 盒子模型。 1. W3C 盒子模型（标准盒子模型）：盒子实际内容（content...
CSS基础知识
07-22
资源名称：CSS基础知识内容简介：0、基础知识1、CSS概述2、CSS基础语法3、CSS选择器4、CSS主要属性5、CSS核心机制-盒子模型6、CSS重点和难点-定位7、综合示例浏览器模式 当浏览器厂商开始创建于标准兼容的浏览器时...
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础 知识点总结
最新发布
星星之火的语言c学习
08-18 2246
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS3基础内容
qq_47896523的博客
01-22 2055
CSS是层叠样式表的简称，CSS是一种标记语言，称为CSS样式表CSS主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式结构（HTML）与样式（CSS）相分离CSS规则由两个主要的部分构成：选择器以及一条或多条声明属性值前面，冒号后面，保留一个空格选择器(标签)和大括号中间保留空格。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3095
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS——CSS基础知识
流楚丶格念的博客
06-26 7284
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础
书启鸿蒙知秋枫
12-28 5918
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
css基础知识
健康平安的活着的专栏
05-12 1855
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
前端基础之CSS扫盲
trong_ 的烂笔头
02-27 6985
光使用HTML来写一个前端页面的话其实只是写了一个大体的框架, 整体的页面并不工整美观, 而CSS可以在HTML的基础之上将页面优化的非常好看, HTML只是描述了网页的结构和有什么内容(也就是让网页有了 “骨”), 而CSS可以自由的设置网页的布局和样式(包括大小/位置/字体/颜色/背景等), 可以让网页的内容充实起来(让网页有了 “皮和肉”), CSS也叫层叠样式表, 一个元素可以运用多组样式, 有多层叠加的效果.
css基础语法与注释,简述CSS注释
weixin_33040687的博客
08-04 2363
你知道什么是css注释？你了解CSS注释有什么作用？你知道为什么要进行注释？不知道？没关系，下面小编就为大家慢慢解释一下。一、什么是CSS注释Css注释又被称作CSS注解，是在css文件代码间加入注释，解释说明意思。就像我们学习语文一样在文章用不同符号、颜色进行批注说明一个道理，通常情况下css注释是不会被浏览器解释或被浏览器忽略的。二、CSS注释作用CSS注释有着注解说明之用，我们常用于对CSS...
前端HTML5 css基础
03-09
* 绝对路径：图片的绝对位置，例如 `C:\Users\孤坟\Documents\前端\前端设计 1\css.html\7.png`。 HTML 超链接 ------------- * `<a>`：超链接标签，从一个页面跳转到另一个页面。 * 属性： + `href`：链接目标的...
CSS基础视频教程
07-22
内容包括css基础、css选择器上、css属性、背景、颜色、边框、字体文本文本装饰、列表、css元素分类等 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
css基础（对应博客内容）
04-08
css基础：元素显示模式，背景样式，css三大特性，盒子组成部分
CSS+DIV设计基础
05-03
与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起DIV+CSS组合，还要从XHTML说起。XHTML是一种在HTML（标准通用标记语言的子集）基础上优化和改进的新语言，目的是基于XML...
CSS网页设计基础教程
07-22
资源名称：CSS 网页设计基础教程 教程内容：00-00-课程介绍01-01-html01-02-段落标签01-03-图片标签01-04-列表标签01-05-区块标签01-06-链接标签01-07-span标签02-01-css02-02-在网页中嵌入CSS02-03-选择器 控制...
Web前端基础：CSS3过渡&转换.pptx
05-06
单元二 CSS3样式表端基础前Web单元2-9 CSS3过渡&转换13转换应用过渡应用2过渡属性4转换属性什么是CSS3过渡当元素从一种样式变换为另一种样式时为元素添加效果。1过渡应用CSS3过渡是元素从一种样式逐渐改变为另一种的...
css基础知识plonk精心整理
04-22
css基础笔记，是css的基础部分 内容通俗易懂
HTML CSS基础
07-27
根据本学期所学习的HTML及CSS网页制作基础知识，我们可以了解到HTML是一种标记语言，用于创建网页结构和内容，而CSS则是一种样式表语言，用于控制网页的外观和布局。在网页制作中，我们需要掌握HTML的基本标签，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值