首页 > 其他分享 >css 常用的文本样式、选择器、浮动和定位

css 常用的文本样式、选择器、浮动和定位

时间:2023-04-12 19:12:37浏览次数:40  
标签:文本 元素 id 设置 图像 font 选择器 css

常用的文本样式

  ~ color 设置文字的颜色

      color:red

  ~ font-size 设置文字的大小

      font-size:12px

  ~ font-family 设置文字的字体

      font-family:微软雅黑

  ~ font-style 设置字体是否倾斜

      font-style:“normal”   不倾斜

      font-style:“italic”       倾斜

  ~ font-weight 设置文字是否加租

      font-weight:bold  加粗

      font-weight:normal    不加粗

  ~ line-height 设置文字的行高

      line-height:30px

  ~ font 设置文字的几个属性,顺序如下:font:是否加粗,字号/ 行高 ,字体;

      font:normal   12px / 24px   ‘微软雅黑’

  ~ text-indent 设置文字首行缩进

      text-indent:24px;设置文字首行缩进24px

  ~ text-align 设置文字水平对齐方式

      text-align:center 设置文字水平居中

 

选择器

  id 选择器

    id 选择器前面都有一个 # 号,通过id名来选择元素,元素的id名称不能重复。所以一个样式设置项只能对应于页面上一个元素,一个ID只能在文档中使用一次,id 名一般给程序使用,所以不推荐在css设置样式时使用id作为选择器

  类选择器

    必须将class指定为一个适当的值,类名前有一个点号(·),通过class类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用

  属性选择器

    通过元素的属性进行选择,选择带name属性的 a 标签

    

 

   包含选择器(层级选择器)

    主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,也可通过层级防止命名冲突

  组选择器

    多个选择器,每个选择器之间用逗号隔开,如果有同样的样式设置,可使用组选择器

    

              

 

   

 浮动

  浮动的框可以向左向右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止

  float 属性实现元素的浮动

  img { float:right; }

  

 

 

   

 设置背景颜色

    background-color 设置背景颜色,这是属性接受任何合法的颜色值

 设置背景图像

    background-image:把图像放入背景,属性的默认值是none,表示背景上没有放置任何图像,如果需要设置一个背景图像,必须为这个属性设置一个URL值

    

 

 

  背景图平铺

    使用background-repeat 属性可进行背景图平铺

    repeat:导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样

    repeat-x:图像只在水平上重复

    repeat-y:图像只在垂直方向上重复

    no-repeat:不允许图像在任何方向上平铺

         

 

     

 

标签:文本,元素,id,设置,图像,font,选择器,css
From: https://www.cnblogs.com/lili37/p/17310874.html

相关文章

  • CSS层叠样式表
    目录CSS层叠样式表CSS选择器1.CSS基本选择器2.CSS组合选择器3.分组与嵌套4.属性选择器5.伪类选择器6.为元素选择器选择器优先级CSS样式调节CSS层叠样式表主要用来调节html标签的各种样式"""思考:页面都是由HTML构成的并且页面上有很多相同的HTML标签但是相同的HTML标签在不......
  • 富文本转路径
    +(UIBezierPath*)attributedString2BezierPath:(NSAttributedString*)attributedStringinBounds:(CGSize)bounds{NSString*clearText=attributedString.string;NSCharacterSet*ignoredCharsSet=[NSCharacterSetwhitespaceAndNewlineCharacterSet];......
  • python爬虫(四):文本、图片、视频爬取实例
    上篇讲了常用的python爬虫工具,可以快速支撑我们数据的爬取--解析--分析,这里将拆解几个爬虫程序实例进行学习,实例来自于https://cuijiahua.com/blog/2020/04/spider-6.html的系列教程或者其他小爬虫;一、文本图表数据抓取(编程语言排名)#!/usr/bin/envpython#coding:utf-8importr......
  • CSS基础:块状元素、内联元素、内联块状元素(行内元素)
    css基础:块元素、内联元素、内联块元素CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。1.常用的块状元素有:<div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>2.常用的内联元素有:<a>、<s......
  • CSS修改input中的placeholder默认颜色
    使用input-placeholder属性来修改placeholder的默认颜色:为了兼容不同的浏览器内核,要添加不同的前缀input::input-placeholder{ color:#999;}input::-webkit-input-placeholder{ /*Chrome*/ color:#999;}input::-moz-placeholder{ /*MozillaFirefo......
  • 【C++】统计文本词频程序
    1#include<iostream>2#include<fstream>3#include<string>4#include<iomanip>5#include<vector>6#include<map>7#include<cctype>8#include<algorithm>9boolcmp(std::pair<std::strin......
  • CSS杂谈——flex布局里面的auto到底多长
    本篇博客将以“flex布局里设置auto的区块怎么让文案超出省略的问题”作为切入点,来分析一下flex布局里面各子项的具体长度到底怎么计算。从需求出发谈flex布局我们有一个H5项目,类似于微信的通讯录界面,前面是头像,后面是昵称。所以我们一开始的代码是这么写的:<divst......
  • 记录-css实现交融文字效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定。第一步、我们要将一行文字从中间展开<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-U......
  • css steps实现文本一个字一个字显示
    大致思路:使用相对定位的div覆盖文本内容,并用animation控制宽度,位置。换行步骤在外层div上控制高度即可。css的steps与animation一起使用可以控制文字单个显示,类似于文本输入,不过显示频率是线性。添加一些css变量控制步骤宽度、高度和时间等,便于vue中也通过组件的props......
  • 文本摘要热点及发展方向(?)
    热点:2019:摘要定制化的预训练模型不同场景的数据集学术论文摘要生成式摘要的事实一致性方向:模仿人撰写摘要的模式,融合抽取式和生成式摘要方法生成联合摘要基于语义层面研究进一步地深度挖掘句子级、篇章级的语义并加以利用来进一步提高文本摘要的语义一致性和可读性定制......