Dissertation CSS
Autor:
Michelle Baltazar
Letzte Aktualisierung:
vor 8 Jahren
Lizenz:
LaTeX Project Public License 1.3c
Abstrakt:
Excerpt from main dissertation
\begin
Discover why 18 million people worldwide trust Overleaf with their work.
Excerpt from main dissertation
\begin
Discover why 18 million people worldwide trust Overleaf with their work.
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% DISSERTAÇÃO PROFMAT
%
% Created by Michelle Cristina de Sousa Baltazar
%
%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\title{Dissertation CSS}
\documentclass[12pt, a4paper,oneside]{book}
% margens segundo abnt
\usepackage[top=3cm,left=3cm,right=2cm,bottom=2cm]{geometry}
% espaçamento entre linhas
\linespread{1.3}
% espacamento entre parágrafos
\setlength{\parindent}{1.25cm}
% colocar parágrafo no começo das seções
\usepackage{indentfirst}
% para subitem
\usepackage{enumitem}
\usepackage{mathtools}
% para sub sub item
\usepackage{outlines}
% bibliografia e estilo
\usepackage[round]{natbib}
\bibliographystyle{apa}
% insere paginas em pdf (usar para inserir a ficha)
\usepackage{pdfpages}
% retira primeira página do capítulo
\usepackage{etoolbox}
\patchcmd{\chapter}{plain}{empty}{}{}
\patchcmd{\part}{plain}{empty}{}{}
% tira a palavra capitulo dos capitulos (ABNT)
\usepackage{titlesec}
\titleformat{\chapter}{\huge\bf}{\thechapter}{20pt}{\huge\bf}
%\documentclass{article}
\usepackage[brazilian]{babel}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{parskip} % inserir linhas entre paragrafos
\usepackage{tabularx}
\usepackage{multirow}
\usepackage{graphicx} % Required for including images
\graphicspath{{figures/}} % Directory in which figures are stored
\newcommand{\compresslist}{ % Define a command to reduce spacing within itemize/enumerate environments, this is used right after \begin{itemize} or \begin{enumerate}
\setlength{\itemsep}{1pt}
\setlength{\parskip}{0pt}
\setlength{\parsep}{0pt}
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}
\begin{tabularx}{\textwidth}{X X}
\textbf{CSS} & \multirow{3}{*}{\includegraphics[width=60mm]{css_logo.jpg}}\\
\\
\textbf{CSS} ou \textbf{\textit{Cascading Style Sheets}} é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação como \textit{HTML} ou \textit{XML}. O seu principal benefício é a separação entre o formato e o conteúdo de um documento.\\
\end{tabularx}
\\
\\
\\
Da mesma forma que o \textit{HTML}, também será interpretado no navegador do cliente ao ser aberta a página que possuir a sua referência.\\
\\
Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um \textit{link} para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.\\
\\
Com a variação de atualizações dos navegadores como \textit{Internet Explorer} que ficou sem nova versão de 2001 a 2006, o suporte ao \textit{CSS} pode variar. O \textit{Internet Explorer 6}, por exemplo, tem suporte total a \textit{CSS1} e praticamente nulo a \textit{CSS2}. Navegadores mais modernos como \textit{Google Chrome} e \textit{Mozilla Firefox} tem suporte maior, inclusive até a \textit{CSS3}, ainda em desenvolvimento.\\
\\
CSS tem uma sintaxe simples e utiliza uma série de palavras em inglês para especificar os nomes de diferentes estilos de propriedade de uma página.\\
\\
\textbf{Sintaxe}\\
\\
A linguagem de folhas de estilo precisa de uma sintaxe para assim ser expressa de uma forma legível para máquina. Por exemplo, aqui está uma folha de estilo simples escrita na sintaxe \textit{CSS}:\\
\\
\textit{\textbf{h1 \{ font-size: 30px \}}}\\
\\
Neste exemplo, definimos que todo título ''h1'' na página destino terá o tamanho da fonte igual a 30 píxels.\\
\\
\textbf{Seletores}\\
\\
Os seletores especificam quais elementos devem ser influenciados pela regra de estilo. Como tal, selectores ligam a estrutura do documento às regras estilísticas nas folhas de estilo. No exemplo acima, o selector "h1" seleciona todos os elementos "h1" de um documento. Os seletores mais complexos podem selecionar elementos com base, por exemplo, em seu contexto, atributos e conteúdos.\\
\\
\textbf{Propriedades}\\
\\
Todas as linguagens de folhas de estilo têm algum conceito de propriedade que dá valores para alterar um aspecto de apresentação de um elemento. A propriedade \textit{font-size} do \textit{CSS} é usada no exemplo acima. As linguagens de folhas de estilo comuns costumam ter cerca de 50 propriedades para descrever a apresentação de documentos.\\
\\
\textbf{Valores e unidades}\\
\\
As propriedades mudam a apresentação de um elemento ao lhe atribuír um determinado valor. O valor pode ser uma sequência, uma palavra-chave, um número, ou um número com um identificador da unidade. Além disso, os valores podem ser listas ou expressões envolvendo vários dos valores acima mencionados. As linguagens de folhas de estilo comuns têm cerca de dez unidades diferentes.\\
\\
\textbf{Mecanismo de propagação de valor}\\
\\
Para evitar ter que especificar explicitamente todos os valores para todas as propriedades de todos os elementos, as linguagens de folhas de estilo têm mecanismos para propagar os valores automaticamente. O principal benefício da propagação de valor é tornar as folhas de estilo menos extensa. No exemplo acima, apenas o tamanho da fonte foi especificada; outros valores podem ser encontrados por meio de mecanismos de propagação de valores. A herança de valores iniciais e a escrita em cascata são exemplos de mecanismos de propagação de valores.\\
\\
\textbf{Modelo de formatação}\\
\\
Todas as linguagens de folhas de estilo suportam algum tipo de modelo de formatação. A maioria dessas linguagens têm um modelo de formatação visual que descreve, com algum detalhe, como o texto e outros conteúdos serão mostrados.\\
\\
Exemplo de um arquivo de CSS básico:\\
\textit{
body \{\\
\hspace*{1cm}background-color: lightblue;\\
\}\\
\\
h1 \{\\
\hspace*{1cm}color: white;\\
\hspace*{1cm}text-align: center;\\
\}\\
\\
p \{\\
\hspace*{1cm}font-family: verdana;\\
\hspace*{1cm}font-size: 20px;\\
\}
}
\\
\begin{tabularx}{\textwidth}{X X}
Página HTML sem CSS: & Página HTML com CSS:\\
\includegraphics[width=77mm]{css_htmlSEMcss.PNG} & \includegraphics[width=77mm]{css_htmlCOMcss.PNG}\\
& \\
Exibição da página sem CSS: & Exibição da página com CSS:\\
\includegraphics[width=77mm]{css_paginaSEMcss.PNG} & \includegraphics[width=77mm]{css_paginaCOMcss.PNG}\\
\end{tabularx}
\\
\\
Lembrando que, semelhantemente ao HTML, o CSS não necessita de identação para seu funcionamento. A aplicação de tabulações e espaços em branco são recomendados apenas para melhor compreensão e visualização do código. A organização facilita encontrar erros e identificar estruturas com rapidez e eficiencia.\\
\\
Desta forma, os dois códigos a seguir geram o mesmo resultado:\\
\\
body\{overflow:hidden;background:\#000000;\}\\
\\
body \{\\
\hspace*{1cm}overflow: hidden;\\
\hspace*{1cm}background: \#000000;\\
\}\\
\end{document}