web前端进阶_CSS基础_基础篇2

最新推荐文章于 2024-06-13 09:37:29 发布
最新推荐文章于 2024-06-13 09:37:29 发布
阅读量278 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17495489/article/details/107963839
版权

web前端css内容

一、css基础

1. 什么是CSS（样式表）

CSS(Cascading Style Sheets) - 层叠样式表

CSS是web标准中的表现标准，主要用来设置网页内容的样式和布局（给标签化妆）

2.CSS代码写在哪儿

位置方法
内联样式表将样式表(css代码)写在标签的style属性中(样式只能作用于一个标签)
内部样式表将样式表写在style标签中（样式只能作用于当前html文件中的所有标签）
外部样式表将样式表写在外部的css文件中，然后在html文件中用link导入（样式可作用域所有的html中所有的标签）

优先级: 内联样式表 > 内部样式表、外部样式表（谁后写谁的优先级高）

3.CSS怎么写

语法：
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;…}

说明:
1)选择器 - 选择器是用来选中当前需要设置样式的标签。（写内联样式表 ‘选择器{}’ 需要省略）
2)属性 - 以属性名:属性值 的形式存在，多个属性之间必须用 ; 隔开
    a.常用属性： color(文字颜色);background-color(背景颜色); font-size(文字大小); width(宽度);height(设置高度)
    b.常用的值： A.数字(数字如果是用来表示，那么值后面必须加单位:px) 100px 100%
          B.颜色：颜色的英文单词，例如：red, green, yellow、pink
          rgb值(通过调节红色、绿色和蓝色的值来调出不同的颜色，值的范围是0~255)
gb(red, green, blue) rgb(255, 0, 0) rgb(0, 255, 0)
rgb(255,255,255) rgb(0,0,0) rgb(200,100, 45)

          rgba(red, green, blue, 透明度)， 透明度的取值范围是0~1 rgba(255,0,0,1)
          16进制颜色值：#6位的16进制数 #ff0000
#00ff00 #ffffff

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
        
 </head>
 <body>
        <!-- 1.内联样式表 -->
        <h1 style="background-color: #ffff00;">内联样式表</h1>
        <p style="color: green;">内联样式表</p>
        
        <!-- 3.外部样式表 -->
        <div id="div1">
            
        </div>
        <link rel="stylesheet" type="text/css" href="css/06-css基础.css"/>
        
        <!-- 2.内部样式表 -->
        <a id="a1" href="">刷新</a>
        <style type="text/css">
            /* 这儿写的css代码 */
            #a1 {
                color: darkmagenta;
                font-size: 30px;
            }
            h1{
                width: 200px;
                color: green;
            }
        </style>
        
 </body>
</html>

在这里插入图片描述

二、选择器

选择器是用来选中指定标签来添加样式
常用的选择器:

1.id选择器:

在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签。（注意：同一个id值在当前页面中只有一个标签）
#p1{} - 选中id是p1的标签

2.类选择器：

在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。
.c1{} - 选中class是c1的所有的标签
注意：同一个class可以作用于不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）

3.元素选择器：

直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签

4.通配符：

将  *  作为选择器, 选中当前页面中的所有的标签

5.群组选择器：

将多个其他的选择器用逗号隔开作为一个选择器，选中每个独立的选择器选中所有的标签
p,.c1,#p1{} - 选中所有的p标签和class是c1标签，以及id是p1的标签
a,img{} - 选中所有的图片和超链接

6.后代选择器：

将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)

7.子代选择器：

将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签子标签中的p标签
div>.p1{} - 选中所有div标签子标签中class是p1的标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
      <!-- ============1.id选择器 ============-->
      <!-- <h1 id="title1">id选择器</h1>
      <p id="p1">我是段落1</p>
      <p>我是段落2</p>
      
      <style type="text/css">
          #p1{
              color: #FF69B4;
              font-size: 25px;
          }
          #title1{
              color: #8B008B;
              width: 200px;
              background-color: yellow;
          }
      </style> -->
      
      
      <!-- ============2.class和元素选择器 ============-->
      <!-- <h1 class="c1">class选择器</h1>
      <p class="c1">我是段落1</p>
      <p class="c2">我是段落2</p>
      <p class="c1">我是段落3</p>
      <a class="c1 c2" href="">我是超链接1</a>
      <a class="c2" href="">我是超链接2</a>
      
      <style type="text/css">
          /* 元素选择器 */
          p{
              color: red;
          }
          
          /* class选择器 */
          .c1{
              background-color: seagreen;
          }
          
          .c2{
              font-size: 25px;
          }
          
          /* 通配符 */
          *{
              border: 1px solid firebrick;
          }
          
      </style> -->
      
      
      <!-- ============3.群组选择器 ============-->
      <!-- <h1 class="c1">class选择器</h1>
      <p class="c1">我是段落1</p>
      <p class="c2">我是段落2</p>
      <p class="c1">我是段落3</p>
      <a class="c1 c2" href="">我是超链接1</a>
      <a class="c2" href="">我是超链接2</a>
      <style type="text/css">
          p,a{
              color: red;
          }
          h1,.c2{
              background-color: yellow;
          }
      </style> -->
      
      <!-- ============4.后代选择器 ============-->
      <p>我是段落1</p>
      <div id="">
          <p>我是段落2</p>
          <span>
              <p>我是段落3</p>
          </span>
          <a href="">我是超链接1</a>
      </div>
      <div id="">
          <p>我是段落4</p>
          <div id="">
              <p>我是段落5</p>
          </div>
      </div>
      
      <style type="text/css">
          /* 后代选择器 */
          div p{
              color: red;
          }
          /* 子代选择器 */
          div>p{
              background-color: skyblue;
          }
      </style>
      
      
</body>
</html>

在这里插入图片描述

三、伪类选择器

1. 什么是伪类选择器

普通选择器选中的是标签（选中一个标签的所有状态）

伪类选择器选中的是标签的状态

语法：
选择标签的选择器:伪类选择器{}

常用的伪类选择器：

伪类选择器名称伪类选择器功能
link链接未被成功访问对应的状态（只针对超链接有效）
visited链接已经被成功访问对应的状态（只针对超链接有效）
hover鼠标悬停在标签上对应的状态（针对所有可见标签有效）
active鼠标按住标签不放对应的状态（针对所有可见标签有效）
focus鼠标点击选择后，出现一种设置的颜色，但是点击其他区域，颜色会消失

代码举例如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <a href="https://www.baidu.com">我是超链接1</a>
        <br>
        
        <style type="text/css">
            a:link{
                color: red;
            }
            
            a:visited{
                color: green;
            }
            
            a:hover{
                color: #0000FF;
                font-size: 30px;
            }
            a:active{
                color: #FF69B4;
            }
        </style>
        
        
        <div id="div1" style="width: 100px; height: 100px;"></div>
        <style type="text/css">
            #div1{
                background-color: #008000;
            }
            #div1:hover{
                background-color: aqua;
            }
            #div1:active{
                background-color: #8B008B;
            }
        </style>
        
        
 </body>
</html>

鼠标没有放在超链接上的显示效果为：
在这里插入图片描述
鼠标放在超链接上的显示效果为：
在这里插入图片描述

苏格尼塞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css基础进阶
weixin_33782386的博客
07-20 109
css知识点 一、盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 border-bottom:下边框 border-left:左边框 border-right:右边框 paddin...
CSS基础进阶
ddd2501的博客
11-01 69
你真的了解CSS吗？满满知识点，你知道几个？
web前端基础知识——css篇
奈何故里无故人的博客
04-19 169
一、元素的定位： absolute 绝对定位 relative 相对定位 fixed 固定定位 元素默认在文档流上占位值 元素在定位之后可以多使用5个属性 zindex 分层 left right bottom top 文档流默认层0 position: relative; left:...
Web前端入门——CSS基础总结
剑来
03-16 513
参考资料 http://www.lvyestudy.com/les_cj/css_list.aspx 章节排序及内容以书籍为准 知识梳理： 1、css基础 引入——伪类——盒子模型——浮动——定位 2、基本样式 列表——表格——图片——背景——字体——段落——边框 第十一章——css引入方式 CSS，即“Cascading Style Sheet（层叠样...
Web前端基础（七）：CSS选择器进阶
JesyWu的博客
02-07 321
1、后代选择器 使用多个选择器的组合来找到要控制的标签； 类名为wrap中的div里面的span标签样式； 选择器直接用空格隔开。 /*样式如下：*/ .wrap div { background-color: skyblue; } div class="wrap"> div>01div> div>02div> div> 效果解释： 类名wrap的div
web_javaweb前端模版_javascript_web前端模板_css_web登录_
09-30
Javaweb前端模板，包含登录，管理页面等
HTML678day_htmlCSS_前端基础_
10-01
黑马前端课程第一阶段就业班学习资料，第6天-第8天内容
web前端开发_css参考手册
05-07
web前端开发_css参考手册
web基础_Javascript_and_CSS教程
03-07
1.了解javaScript出现的背景 2.javaScript函数的定义 3.变量的定义 4.函数的调用 onLoad onClick
HTML绿色风格农业科技公司网站模板_html_CSS+js_web前端开发_
10-04
HTML绿色风格农业科技公司网站模板。Web前端。
前端进阶-样式
moduzhang的博客
11-27 356
创建聚焦样式 :focus 伪类，表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。 outline CSS 属性，设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color。 多数情况下，简写属性更加可取和便捷。 :hover 伪类，可以创建复杂的层叠机制。触摸屏非...
CSS进阶
weixin_68705721的博客
04-06 448
在 CSS 中，所有的元素都被一个个的“盒子”包围着，通过了解盒子模型我们能使用 CSS 实现准确布局、处理元素排列。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。优先级调整伪类匹配与提供的列表中的任何选择器匹配的任何元素，但不添加任何优先级权重。该关系伪类表示与任何一个与锚定的元素的相对选择器相匹配的元素。HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
前端开发工程师css样式进阶指南
前端开发工程师博客
05-25 774
display: none; 与 visibility: hidden; 的区别 相同： 它们都能让元素不可见 区别： display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 v
前端工程——基础篇
weixin_30920853的博客
08-27 1161
你好，切图仔。 不知道你的团队如何定义前端开发，据我所知，时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位，虽然身份之争多少有些无谓，但我对这种偏见还是心存芥蒂，酝酿了许久，决定写一个系列的文章，试着从工程的角度系统的介绍一下我对前端，尤其是Web前端的理解。 只要我们还把自己的工作看作为一项软件开发活动，那么我相信读过下面的内容你也一定会有所共鸣。 前端，是一种GUI软件 现如今...
Web前端——CSS基础
硝酸童不酸的博客
08-25 714
CSS的一些简单知识
《CSS世界》--张鑫旭 : 前端样式高手进阶CSS
天涯芳草
06-15 1180
============================《CSS世界》============================== 样例源代码及效果：
css实现多行文本的展开收起
我码玄黄的博客
06-12 1109
本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。
【Css】纯css展开、收起超出的文本
最新发布
此人太懒，没有任何简介
06-13 445
* 颜色必须与背景相同 *//* 超过的行数隐藏 *//* 和文本大小一样 */
如何用css实现两列布局?
weixin_45596561的博客
06-11 942
2.通过给两列都设置float:left属性和宽度就可以实现两列布局，还要设置伪元素清除浮动；通过给容器设置flex布局，然后每一列设置flex:1，就可以实现两列等宽；实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、Flexbox和Grid布局。无论使用哪种布局方式，都要考虑响应式设计，以确保布局在各种设备上都能良好展示。Grid布局是CSS中最强大的布局系统之一，尤其适合复杂的网格布局。就可以实现等宽两列布局，这种是只在容器设置即可。4. 多总结即可，容易忘。
web前端字体居中_css如何让文字水平居中显示？
05-25
可以使用CSS的text-align属性来实现文字水平居中显示。例如，如果你想让一个div中的文字水平居中，可以在该元素的样式中添加以下代码： ```css div { text-align: center; } ``` 这样，div中的文字就会自动水平居中显示。如果你只想让某个段落中的文字水平居中，可以使用类似下面的代码： ```css p { text-align: center; } ``` 另外，如果你想让文字在垂直方向上居中显示，可以使用CSS的line-height属性。例如，如果你想让一个div中的文字在垂直方向上居中，可以在该元素的样式中添加以下代码： ```css div { line-height: 100px; /* 假设该div的高度为100px */ } ``` 这样，div中的文字就会在垂直方向上居中显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值