css基础

最新推荐文章于 2023-08-18 20:40:23 发布
最新推荐文章于 2023-08-18 20:40:23 发布
阅读量376 收藏
点赞数
分类专栏： 前端 文章标签： css stylesheet class border div import
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinzhengquanqq/article/details/5816011
版权

一，css在页面中的位置

（1）       在<head></head>标签中添加

<style type=”text/css”>

添加样式

</style>

 

（2）将css样式单独做成文件，然后再<head></head>标签中添加

<link href=”样式表” rel=”stylesheet” type=”text/css”>

或

<style type=”text/css”>

@import 样式文件

</style>

 

（3）在html标签中添加style属性，在其值中设置样式

 

二，选择器

（1）       标签选择器

对整个文档中的所有该标签都使用这个样式

标签选择器：

       p

       {

       color:red;

       font-size:30px;

       font-family:黑体;

       }

 

 

（2）       类选择器

使用” .样式名称”进行类选择器的定义

在需要使用的标签处加上class=”样式名称”

类选择器：

       .custom

       {

       color：blue;

       font-size:50px;

       }

在需要使用的标签中使用属性class=”选择器名称”

<p class="custom">举头望明月，</p>

 

 

 

 

 

 

（3）       Id选择器

使用”#样式名称”进行id选择器的定义

在需要使用的标签处加上id=”样式名称”

Id选择器：

       #myid

       {

        font-size:100px;

       }

<p id="myid">低头思故乡。</p>

 

(4)属性选择符

 

语法：
  1. E [ attr ] { sRules }
  2. E [ attr = value ] { sRules }
  3. E [ attr ~= value ] { sRules }
  4. E [ attr |= value ] { sRules }
说明：
属性选择符。
  1. 选择具有 attr 属性的 E
  2. 选择具有 attr 属性且属性值等于 value 的 E
  3. 选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格
  4. 选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E
示例：
h[title] { color: blue; }
/* 所有具有title属性的h对象 */
 
span[class=demo] { color: red; }
 
div[speed="fast"][dorun="no"] { color: red; }
 
a[rel~="copyright"] { color:black; }
(5)包含选择符

 

(6)子对象选择符

 

语法：
E1 > E2 { sRules }
说明：
子对象选择符。选择所有作为 E1 子对象的 E2 。
示例：
body > p { font-size:14px; }
/* 所有作为body的子对象的p对象字体尺寸为14px */
 
div ul>li p { font-size:14px; }
(7)选择符分组

 

三，字体样式

font-size：字体大小

font-family：字体类型

color：字体颜色

font-style：字体样式，默认值为normal

text-align：文本对齐

 

 

四，边框，边界，填充样式

（1）       边框样式

border-width：边框宽度

border-style：边框样式，值none表示无边框，hidden表示隐藏边框，solid实线边框，dashed表示虚线

border-color：边框颜色

border-top：上边框

border-bottom：下边框

border-left：左边框

border-right：右边框

 

也可以简写为border 宽度 样式 颜色

 

（2）       边界样式

margin-top：上边界

margin-bottom：下边界

margin-left：左边界

margin-right：右边界

 

（3）       填充样式

padding-top：上填充

padding-bottom：下填充

padding-left：左填充

padding-right：右填充

 

 

 

 

 

五，表格样式

border-collapse：表格中的边框，值separate表示边框独立；值collapse表示边框合并

border-spacing：表格独立边框样式的间距

 

六，背景样式

background-image：url(背景图片地址)表示背景图片

background-color：背景颜色

background-position：背景位置

 

七，链接相关样式

链接无下滑线

text-decoration:none

默认链接

A：link{}

A：visited{}鼠标点击后的样式

A：hover{}鼠标悬停在链接上的样式

A：active{}鼠标点击链接后的样式

 

<STYLE type="text/css">    

  A

{

 color: blue;

       text-decoration: none;        //无下划线的超链接样式

 }

A:visited{}            //表示鼠标点击后的链接     

  A:hover

{                //表示鼠标在超链接上悬停时

        color: red;             

       }

  A:active{}             //表示鼠标点击时的链接

 </STYLE>

 

 

八，图片按钮样式

Css控制样式类选择器，背景图片，盒子模型

.picButton{

   background-image: url(images/back.jpg);       //设置按钮的背景图片

   border:0 px;                                //设置按钮的边界

   margin: 0px;                               //设置边框

   padding: 0px;                              //设置填充

   height: 23px;                              //设置高度

   width: 82px;                              //设置宽度

   font-size: 14px;        }                     //设置字体

 

语法：
E1 , E2 , E3 { sRules }
说明：
选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
示例：
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }

 

语法：
E1 E2 { sRules }
说明：
包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
示例：
table td { font-size:14px; }
 
div.sub a { font-size:14px; }
jinzhengquanqq
关注
专栏目录
Selector选择器的使用+各种样式的对话框
caoqijia123的博客
06-05 621
一. Selector选择器 通过selector选择器，我们可以更快捷的实现底部导航！ 效果如下： 我们如何创建选择器？ 创建字体颜色改变选择器 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" and...
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
类选择器详解
W Y L
12-20 7313
类选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。例如： <h1 class="important">This heading is very important.</h1> <p class="important">This paragraph is very important.</p &g...
android背景选择器selector用法、自定义Button按钮样式
zdz_conquer的博客
01-14 893
android背景选择器selector用法、自定义Button按钮样式 一：android背景选择器selector用法 1：创建xml文件，位置：drawable/xxx.xml,同目录下记得要放相关图片                            android:drawable="@drawable/pic1" />         
简单CSS总结
shangruo的专栏
08-16 465
走自己的路哪怕无路可走                                  ——乔布斯目前 CSS最新版本是3.0,HTML最新版本是5.0CSS样式导入样式表@import url("style.css");外部样式表行内样式内嵌样式表p{font-family:"隶书";font-size:18px;color:
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础
qq_62377885的博客
06-01 3732
CSS 是层叠样式表（Cascading Style Sheets）的简称，是一种用于描述 HTML 或 XML 文档的呈现的样式表语言。CSS 可以用来控制网页的布局、字体、颜色、背景、边框、动画等各种视觉效果。CSS 也可以让网页适应不同的设备和屏幕尺寸CSS 的基本语法是由选择器和声明组成的。选择器用来指定要应用样式的元素，声明用来指定元素的属性和值。声明由属性和值组成，属性是要设置的样式特征，值是要赋予属性的具体效果调色网站推荐。
CSS基础样式
qq_62283164的博客
07-19 1499
CSS基础样式 一、css语法规范 二、CSS选择器 1.类（class）选择器 2.id选择器 3.CSS选择器优先级 三、网页中引入css样式 1.内联（行内）样式 2.内部样式表 3.外部样式表 4.link标签引入外部样式文件 ​编辑 5.CSS样式优先级 四、字体样式 五、文本样式 六、鼠标样式 七、背景样式 八、列表样式 九、CSS伪类 十、CSS练习之美团左侧菜单栏...
CSS基础知识
ashfiqa的博客
01-21 2189
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 4069
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
最新发布
星星之火的语言c学习
08-18 2839
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
js自定义对象和方法
mozhan的专栏
08-18 1万+
<br />JS中定义类的方式有很多种：<br />1、工厂方式<br />  <br />  function Car(){<br />   var ōcar = new Object;<br />   ocar.color = "blue";<br />   ocar.doors = 4;<br />   ocar.showColor = function(){<br />    document.write(this.color)<br />   };<br />   return ocar;<br
css控制图片与文字对齐
mozhan的专栏
08-25 1万+
<br />文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。<br />设置各对象的vertical-align属性，属性说明：<br />baseline－将支持valign特性的对象的内容与基线对齐<br />sub－垂直对齐文本的下标<br />super－垂直对齐文本的上标<br />top－将支持valign特性的对象的内容与对象顶端对齐<br />text-top－将支持valign特性的对象的文本与对象顶端对齐<br /
js常用内部对象
mozhan的专栏
08-18 2568
<br /> <br />１)、串对象  <br /> string对象：内部静态性。 <br /> <br /> 访问properties和methods时，可使用（.）运算符实现。 <br /> <br /> 基本使用格式：objectName.prop/methods <br /> <br />（１）串对象的属性<br />　　该对象只有一个属性，即length。它表明了字符串中的字符个数，包括所有符号。例：<br />mytest="This is a JavaScript"<br />my
javascript(1)
mozhan的专栏
08-18 1048
一，js语法（1）定义变量var定义所有的变量document.write()表示向文档中输出var greeting="hello";document.write(greeting);（2）运算符和c#相同var result;result=2+3;（3）逻辑控制语句和c#相同result1 = (3>4)?"Y":"N";var a,b,c;a=true&&false;b=true||false;c=!true;（4）函数函数是靠html标签中的事件进行驱动的function 函数名(){}函数中的形式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值