首页 > 其他分享 >css

css

时间:2023-02-15 12:03:42浏览次数:35  
标签:color 标签 元素 样式 red 选择器 css


1、css简介

CSS 指层叠样式表 (Cascading Style Sheets)。主要用来设置网页中元素的样式。如边框,颜色,位置等…

 

CSS即可以现在HTML中,也可以写在元素的style属性里面,还可以写在.css外部文件里然后引入到页面

 

 

2、基本语法

 

  • 语法非常简单。

写在外部文件或者html头标签里的时候。

选择器 {

样式名:样式值;

样式名:样式值;

…………

}

 

写在元素的style属性里面的时候。“样式名:样式值;样式名:样式值;……”

<p style=”color:red;font-size:16px;”>你好呀!</p>

 

  • 编写位置

内部

标签的style属性中:

<p style="color: red ; font-size: 12px">落霞与孤鹜齐飞</p>

 

写到html头的style标签中:

<style type="text/css">

p {

color: blue;

background-color: yellow;

}

</style>

 

外部

写在外部的css文件中,然后通过link标签引入外部的css文件:

<link rel="stylesheet" type="text/css" href="style.css" />

 

3、选择器

  • 标签选择器
  1. 按照标签名选中相应的元素。

p {

color:red;

}

  • Id选择器
  1. 按照元素的id选中相应的元素,使用#id值

<p id=”abc”>大家好</p>

#abc {

color:red;

}

  • 类选择器
  1. 按照元素的类名选中相应的元素,使用.class值

<p class=”foot”>你好</p>

<b class=”foot”>你也好</b>

.foot {

color:red;

}

 

  • 组选择器

可以同时使用多个选择器选中一组元素,使用,分隔不同的选择器

选择器1,选择器2,……,选择器N{

color:red;

}

 

4、常用样式

4.1颜色

color:red;

颜色可以写颜色名如:black, blue, red, green, white, yellow等

颜色也可以写rgb值和十六进制表示值:如rgb(255,0,0),#00F6DE,如果写十六进制值必须加#

4.2 宽度

width:19px;

宽度可以写像素值:19px;

也可以写百分比值:20%;

4.3、高度

height:20px;

同宽度一样

4.4背景颜色

background-color:#0F2D4C

标签:color,标签,元素,样式,red,选择器,css
From: https://blog.51cto.com/u_14389461/6059080

相关文章

  • 让CSS flex布局最后一行列表左对齐的N种方法
    原文链接https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091838&idx=1&sn=fa4e1ed1e02d2813633691220c60f52f&chksm=be5bc953892c4045b64fa5a804a1d3676f5894......
  • 一、前端基础HTMl、CSS
    一、CSS初识:1.1、内部样式表:<head><styletype="text/CSS">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style></head>1.2、行内式(内......
  • 二、Html5和CSS3
    一、属性选择器:^='icon'、****$='data'、*='-'1.1、input标签中有value属性的控件input[value]{color:pink;}1.2、input标签中有value属性并且值等于“dd......
  • CSS简单选择器
    CSS选择器,先来学习简单选择器。CSS选择器是用来“寻找”或“选择”,你想要定义样式的HTML元素的。我们前面学习过一个最简单的选择器——比如,这个H1元素就是选择器,我们称之为......
  • CSS样式表的优先级
    前面,我们已经学完了内联样式、内部样式和外部样式。大家思考一个问题,如果三个样式表修饰同一个元素,哪一个优先起作用呢?(动画演示效果)带着这个问题,我们来做个实验。来到编辑器......
  • 教你如何使用CSS实现毛玻璃效果
    前言之前在逛一些网站的时候,就经常看见一些图片背景模糊的效果,这样的效果可以使得用户将更多的注意力放在清晰的地方上,可以不经意间引导用户。我就很好奇,这样的一种效果是怎......
  • HTML5+CSS3(六)-全面详解(学习总结---从入门到深化)
    目录​​CSS简介​​​​ CSS概念​​​​为什么需要CSS​​​​CSS和HTML之间的关系​​​​ 语法​​​​学习效果反馈​​​​ CSS的引入方式​​​​ 内联样式(行内......
  • 如何使用CSS
    如何使用CSSCSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的.CSS可以通过以下方式添加到HTML中:内联样式-在HTML元素中使用"style" 属性内部样式表......
  • 语音通话视频通话界面实现,用于展示出webRTC实时聊天媒体流,CSS实现效果
    在开发webRTC的语音和视频通话功能的时候,需要展示出媒体流,这样就需要一个下面这样的效果  html部分代码<!--视频--><divclass="remoteVideoMask......
  • CSS 实现水平和垂直居中的三种方法
    绝对定位+负边距:使用绝对定位并设置左右负边距和上下负边距,就可以实现水平和垂直居中的效果。.center-element{position:absolute;top:50%;left:50%;......