首页 > 其他分享 >CSS_1_基本知识

CSS_1_基本知识

时间:2023-01-10 11:46:10浏览次数:31  
标签:... 样式 标签 基本知识 id 设置 选择器 CSS

css是指层叠样式表,依赖于HTML存在,作用:给网页进行样式开发,给网页进行布局。

 

 


 

使用过程:

  1、声明css代码域

  2、使用选择器选择要添加样式的标签

  3、书写样式单


声明方式:

  1、在head标签中使用style标签声明:一般为某类标签的公共样式。

  2、在标签上使用style属性进行声明:一般为给某个标签进行样式设置。

  3、在head标签中使用link标签引入外部声明的css文件:一次声明,随处使用。


 

常用选择器:

  1、标签选择器:

      标签名{样式名1:样式值1;...}

      本页面所有的此标签使用此样式

  2、id选择器:(id唯一)

      #标签的id值{样式名1:样式值1;...}

      给指定id的标签设置样式。

  3、类选择器:(class不唯一)

      .标签的class值{样式名1:样式值1;...}

      给所有class值为指定值的标签设置样式。

  4、全部选择器:

      *{样式名1:样式值1;...}

      给页面的所有标签使用此样式

  5、组合选择器:

      标签名,#标签的id值,....{样式名1:样式值1;...}

      解决不同选择器之间重复的问题。

  6、子标签选择器:

      选择器1 子标签{样式名1:样式值1;...}

      给子标签设置样式。

  7、属性选择器:

      标签名[属性名=属性值]{样式名1:样式值1;...}

      给具有指定属性值的标签设置样式。


 

常用样式单:

  边框:border:solid 1px,设置边框线。

  字体:

      font-size:10px,设置字体大小。

      font-family:"黑体",设置字体。

      font-weight:bold,字体加粗。

  颜色:color,设置颜色。

  背景颜色:background-color:颜色。

  背景图片:

      background-img:图片的url。

      background-repeate:no-repeate,设置图片不重复。

      background-size:cover,图片平铺整个页面。

  浮动:float:left|right

  行高:line-height:10

 

标签:...,样式,标签,基本知识,id,设置,选择器,CSS
From: https://www.cnblogs.com/lurenjia-bky/p/17039684.html

相关文章

  • 第二周 shell脚本以及Zookeeper基本知识
    1.shell脚本编程shell中有3种变量:用户变量、环境变量、特殊变量;变量的使用最好就是使用双引号括起来。变量需要遵循的规则:变量名可以由字母、数字和下画线组成,但是......
  • CSS教程
    CSS(CascadingStyleSheets,层叠样式表)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,CSS文件扩展名为.css实例<!DOCTYPEh......
  • CSS 概念
    什么是CSS层叠样式表或级联样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本......
  • CSS引入方式
    内联式、行内引入:引入方法直接在html的标签中书写css。这是一种最为原始也是最容易理解的样式内容书写在html标签的style属性中,多个css样式可以写在一起,使用分号隔开......
  • css的复杂选择器
    后代选择器后代选择器使用空格间隔开(AB:在A元素中寻找后代(不一定是儿子)是B的元素)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>后......
  • 那些炫酷的CSS文字效果之诗词《兔》
    不知不觉已经迈入2023年,今年是兔年,想到兔子就会联想到玉兔,中秋,胡萝卜,兔子不吃窝边草,这就越扯越远了,今天的主题是用纯CSS来实现各种不错的文字效果,文字则摘录古诗词中有关《......
  • CSS - 弹性布局 弹性布局的特性,父元素上的弹性布局,当父元素为弹性布局 子元素上的弹性
    1.弹性布局的特性(1)任何一个容器都可以指定为弹性布局(2)当我们为父盒子设置为弹性布局之后,子元素的float,clear,vertical-align属性将失效(3)通过给父元素设置flex属性,......
  • CSS - 动画,动画的定义,动画全部属性
    1.动画的定义<style>/*只定义起始与结束*/@keyframes动画名称1{from{}to{}}/*用百分比定义动画*/@keyframes动画......
  • CSS - 2D转换,移动,旋转,缩放
    1.移动/*第一个参数控制左右,第二个参数控制上下*/transform:translate(10px,20px);/*单独控制左右*/transform:translateX(10px);/*单独控制上下*/transfor......
  • 【CSS】修改ul, li 的相关属性
    对于很多人用div来做网站时,总会用到,但在显示效果时前面总是会有一个小黑点,这个令很多人头痛,但又找不到要源,其它我们可以用以下方法来清除。在CSS中写入代码。找到相关性......