14 Nisan 2017 Cuma

Restful Web Service Örnek Ugulamaları


Uygulamaların yapım sürecinde Netbeans IDE  kullanacağım. Öncelikle aşağıda görüldüğü gibi Maven tabanlı web projesi oluşturuyoruz. Neden Maven tabanlı derseniz ilerde kullanacağımız bağımlılıkarı yani Dependency' leri projeye dahil ederken bize yeteri kadar kolaylık sağlıyor.
Sunucu olarak  Apache TomCat or TomEE kullanacağım.




Projemizi oluşturduktan sonra ilk işimiz gerekli kütüphaneleri projemize dahil etmek olucak.
İlk olarak RestEasy kütüphanesini projemize dahil ediyoruz.  İncelemek isterseniz bu kütüphaneyi http://resteasy.jboss.org adresten inceleyebilirsiniz.

Projemizin Project File klasörü altında olan pom.xml  daosyasını açıp  bağımlılıklarımızı ekliyoruz.

<!-- https://mvnrepository.com/artifact/org.jboss.resteasy/resteasy-jaxrs -->
<dependency>
    <groupId>org.jboss.resteasy</groupId>
    <artifactId>resteasy-jaxrs</artifactId>
    <version>3.1.0.Final</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.jboss.resteasy/resteasy-servlet-initializer -->
<dependency>
    <groupId>org.jboss.resteasy</groupId>
    <artifactId>resteasy-servlet-initializer</artifactId>
    <version>3.1.0.Final</version>
</dependency>

<!-- https://mvnrepository.com/artifact/org.jboss.resteasy/resteasy-jackson-provider -->
<dependency>
    <groupId>org.jboss.resteasy</groupId>
    <artifactId>resteasy-jackson-provider</artifactId>
    <version>3.1.0.Final</version>
</dependency>


Bağımlılıklarımızı ekledikten sonra projemizi Clean and Build edersek gerekli jar dosyalarını maven indirip proje classpath' ine koyacaktır. 

 

@GET 


JSON Uygulaması(@GET)


Source Packages klasörü altında Application adında bir package oluşturup içinde ApplicationClass adınıda yeni bir class oluşturuyoruz. Bu classımız Application sınıfında kalıtılacaktır. Kod yapısı aşağıdaki gibidir.


@Application("rootService")  notasyanu ne diye sorarsanız  bizim projemizin url kısmının kökü yani başı diyebiliriz. İlerki bölümlerde görüntülü olarak paylaşacağım.



 Burdaki işlemlerimiz bittikten sonra yeni bir paket oluşturalım ve adı Pojo olsun. İçerisinde Person.java  adında yeni bir sınıf oluşturuyoruz.

Person.java 

package pojo;

public class Person {
    String name;
    String surname;
    String city;
    String country;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name= name;
    }
   public String getSurname() {
        return surname;
    }
    public void setSurname(String surname) {
        this.surname= surname;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city= city;
    }
   public String getCountry() {
        return country;
    }
     public void setCountry(String country) {
        this.country= country;
    }    
}


Sınıfımıza değişkenler tanımlayıp get- set medotlarını oluşturduk. Şimdi   getExample adında bir paket oluşturup İçerisinde  GetExampleJson.java sınıfını  oluşturuyoruz.

GetExampleJson.java

package getExample;
import pojo.Person;
import java.util.ArrayList;
import java.util.List;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import  javax.ws.rs.core.MediaType;

@Path("/getExample")         /*  getExample ve altındaki url isteklerini bu sınıf karşılar */ 
public class GetExampleJson {
    @GET                           /*Web servisimize veri sunar*/
    @Produces(MediaType.APPLICATION_JSON) /*Hangi tip veri döneceğini  ayarladık*/ 
    @Path("/getJsonValue") /* */
     public Person getJsonValue(){
         Person person = new Person();
         person.setName("Burhan");
         person.setSurname("Arslan");
         person.setCity("Istanbul");
         person.setCountry("Turkiye");
         return person;
     }
}

Şimdi uygulamamızı çalıştırıyoruz. İlk önce karşımızı aşağıda görüldüğü gibi boş bir sayfa dönecektir.


Biz burda url adresimizi sırasıyla  @Application("rootService") +@Path("/getExample") +  @Path("/getJsonValue") notasyonlarını ekliyoruz ve enter diyip adrese gidiyoruz. 



Karşımıza JSON formatında web servisimizden veri aldık.


XML Uygulaması(@GET)

GetExampleWithXmlOutput.java sınıfı oluşturup xml işlemlerini bu sınıfta uyguladım. Dilerseniz tek bir sınıf altında diğer işlemleride uygulayabilirdik.

@Path("/xmlOutput")
public class GetExampleWithXmlOutput {
    @GET
    @Produces(MediaType.APPLICATION_XML)
    @Path("/getPersonasXml")
    public PersonXml getPersonasXml(){
         PersonXml personxml = new PersonXml();
         personxml .setName("Burhan");
         personxml .setSurname("Arslan");
         personxml .setCity("Istanbul");
         personxml .setCountry("Turkiye");
         return personxml;
    }




 adresimize sırasıyla  @Application("rootService") +@Path("/xmlOutput") +  @Path("/getPersonasXml") notasyonlarını ekliyoruz ve enter diyip adrese gidiyoruz.  Web servicimiz ile xml veri formatındaki verilerimizi elde ettik.



@POST

JSON Uygulaması(@Post)

Post işlemlerimizi yapacağımız postExample adında yeni bir paket ve içerisinde PostExampleClass.java adında yeni bir sınıf oluşturuyoruz. Json ve xml formatındaki post işlemlerini bu sınıf içerisinde uygulayacağım. Dilerseniz siz farklı sınıflar içerisinde uygulayabilirsiniz.


@Path("/postExample")
public class PostExampleClass {

    @POST
    @Consumes(MediaType.APPLICATION_JSON)
    @Path("/postAValue")
    public void postAValueMetod(PersonXml person) {

        System.out.println(person.getName());
        System.out.println(person.getSurname());
        System.out.println(person.getCity());
        System.out.println(person.getCountry());
    }



    // XML FORMATI
    @POST
    @Consumes(MediaType.APPLICATION_XML)
    @Produces(MediaType.APPLICATION_XML)
    @Path("/postAValuegeribildirimliXml")

    public PersonXml personInXml(PersonXml person) {
        System.out.println(person.getName());
        System.out.println(person.getSurname());
        System.out.println(person.getCity());
        System.out.println(person.getCountry());
        return person;
    }


Sırasıyla değinecek olursan ilk olarak Json verilerimiz post edeceğiz. Bunun için öncelikle Json formatında  post edebilmemiz için elimizde json formatında veri olması gerekli.
Uygulamayı çalıştırdıktan sonra aşağıdaki gibi url adresimizi girersek json verilerimize tektrar ulşaşıp tekrar kullanmak için kopyalıyoruz.





Şimdi bu veriler Postman yardımyla  bu verileri uygulamamıza göndereceğiz. Postmanı Buradan indirip kullanabilirsiniz.
Aşağıdaki gibi postman özelliklerini belirleyip gerekli ayarları yapıyoruz.


Sağ üstte sent butonuna basınca Netbeans üzerinde output üzerinde verilerimiz aşağıdaki gibiyse post işlemimiz gerçekleşmiştir.





























RestFul

 RESTful API, HTTP istekleri olan GET, PUT, POST ve DELETE isteklerini kullanan bir uygulama programlama arabirimidir.

 RESTful web servisi : web servislerinin geliştirilmesinde sıkça kullanılan iletişimlere mimari bir tarz ve yaklaşım olan temsili REST teknolojisine dayalıdır.


Genellikle REST teknolojisi kendisinden daha güçlü olan Basit Nesne Erişim Protokolü (SOAP) ' a tercih edilir. Çünkü REST, daha az bant genişliği kullanır, bu nedenle internet kullanımı için daha uygun olur.

Tarayıcıların kullandığı REST, internetin dili olarak düşünülebilir. Bulut kullanımının artmasıyla birlikte, web hizmetleri sunmak için API'lar ortaya çıkıyor. REST, kullanıcıların bulut hizmetlerine bağlanmasına ve etkileşimde bulunmasına izin veren API'leri kullanmak mantıklı bir seçimdir. RESTful API'ler Amazon, Google, LinkedIn ve Twitter gibi siteler tarafından kullanılır.

RESTful API'ler nasıl çalışır?



RESTful bir API, bir dizi küçük modül oluşturmak için bir işlemi parçalamaktadır. Her bir modül, işlemin altta yatan kısmını ele alır. Bu modülerlik, geliştiricilere çok fazla esneklik sağlıyor ancak geliştiricilerin sıfırdan tasarım yapmaları zorlu olabilir.

RESTful bir API, RFC 2616 protokolü tarafından tanımlanan HTTP yöntemlerinden açıkça faydalanır. Bir kaynağı almak için GET kullanır; PUT, bir nesnenin, dosyanın veya bloğun  durumunu değiştirmek veya güncellemek; Kaynağı oluşturmak için POST; Ve onu kaldırmak için DELETE isteklerini kullanır.

Daha anlaşılabilir bir şekilde ifade edersek: Projelerin teknolojileri farklı olarak geliştirilse bile iki projenin  birbiriyle konuşabilmesini sağlamak. Bir sunucunun ortam bağımsız ürettiği bir çıktıyı diğer taraftan diğer sunucu bu çıktıyı alarak işleyebiliyor. Birbirleri arasında get-post işlemi yapmak ve xml, json verileri üreterek sunucular arasında veri takası yaparak konuşmalarını sağlamak diyebiliriz.

13 Nisan 2017 Perşembe

JSF' de Ajax kullanımı

AJAX Asenkron JavaScript ve Xml anlamına gelir.

 Ajax tekniği kullanılarak javascript kodu sunucuyla veri alışverişinde bulunur ve tüm sayfayı yeniden yüklemeksizin web sayfalarının bölümlerini günceller.


JSF Tag

<f:ajax execute="input-component-name" render = "output-component-name" />

Örnek Uygulama


Ajax.java


import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "ajax", eager = true)
@SessionScoped
public class Ajax implements Serializable {
    private String name;
    private String surname;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name= name;
    }
    public String getSurname() {
        return  surname;
    }
    public void setSurname(String surname) {
        this.surname= surname;
    }
    public String getWelcomeMessage() {
        return " Merhaba" + name + "  "surname;
    }
    public  Ajax() {
    }
}



index.xhtml


<html xmlns  =  "http://www.w3.org/1999/xhtml"
      xmlns :h  =  "http://java.sun.com/jsf/html"
      xmlns :f = "http://java.sun.com/jsf/core"
      xmlns :p = "http://primefaces.org/ui">
    <h:head>
        <title>JSF tutorial</title>
    </h:head>
    <h:body>
        <h2>Jsf Ajax Kullanımı</h2>
        <h:form>
            <p:panelGrid columns="1" id="inputName">
                <p:inputText  value = "#{ajax.name}"></p:inputText>
                <p:inputText  value ="#{ajax.surname}"></p:inputText>               
            </p:panelGrid>
            <p:commandButton value = "Show">
                <f:ajax execute = "inputName" render = "outputMessage" />
            </p:commandButton>
 <p:commandButton value ="Reset" type="reset"></p:commandButton>
        </h:form>
        <h2><h:outputText id =outputMessage value="#{ajax.welcomeMessage } ></h:outputText></h2>     
    </h:body>
</html>










CSS Notları

 Kısaca html sayfamızda düzeni sağlamak için kullanabileceğimiz bir teknolojidir.


CSS Dosyası HTML Sayfasına Nasıl Çağrılır?

Oluşturduğumuz CSS dosyalarını HTML sayfamıza çağırmanın 2 farklı yolu vardır.. 1. yol link etiketini kullanmak, 2. yol ise style etiketini kullanarak import ile çağırmaktır.

Link ile Çağırma

Head etiketleri arasında aşağıdaki gibi tanımlanır;


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

href : stil dosyasının yoludur.


@import ile Çağırma

Head ya da body etikerleri arasında aşağıdaki gibi tanımlanır ve çağırılır;

<style type="text/css">
@import "style.css";
@import url("style2.css");
</style>
Not: @import işleminden önce herhangi bir CSS kodu olmamalıdır aksi halde import işlemi çalışmaz.


HTML Sayfasında Inline CSS Nasıl Yazılır?

Bunun içinde ya style etiketi kullanılır ya da style niteliği kullanılır.. Genel kapsamda stil kodu yazmak için etiketi, sadece bir nesneye uygulamak için ise niteliği kullanabiliriz.


<style type="text/css">
h1 { color: red }
</style>
veya
<h1 style="color: blue">erbilen.net</h1>

CSS’in Genel Yapısı

Aşağıdaki görsel zaten her şeyi basitçe açıklamaktadır.. Daha ayrıntılı bilgi için videoya göz atabilirsiniz;



CSS’de Açıklama Satırı

 Tarayıcı bu satırları  dikkate almaz, sadece sizin için bir önemi vardır.. Ve aşağıdaki şekilde tanımlanır;
/*
   bu bir açıklama satırıdır
*/

CSS: Seçiciler 

1) * (Evrensel Seçici)

Tüm nesneleri seçmek için kullanılır. Aşağıdaki örnekte tüm nesneleri seçer ve rengini kırmızı yapar
*{
   color: red
 }
ya da bir nesne içerisindeki tüm nesneleri seçip işlem yapabiliriz.
/*
 * divlerden sınıfı arslan olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.arslan* {
     text-decoration: underline
}


2) #X (ID “Tekil” Seçici)

Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * arslan id'li paragrafı seçer ve rengini kırmızı yapar
 */
p#arslan{
     color: red
}

3) .X (Sınıf Seçici)

Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.
/*
 * arslan sınıflı a nesnesini seçer ve rengini mavi yapar
 */
a.arslan{
     color: blue
}

4) X Y (Torun Seçici)

X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.
/*
 * test sınıflı nesne içerisinde bulunan
 * a nesnesini seçip arka plan rengini sarı yapar
 */
.test a {
     background-color: yellow
}

5) X (Basit Seçici)

Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.

/*
 * a nesnelerini seçip alt çizgilerini kaldırır
 */
a {
     text-decoration: none
}

6) X:link ve X:visited (Sözde Sınıf Seçicileri)

Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visited seçicisi kullanılır.

/*
 * Tıklanmamış a nesnelerini seçip
 * arkaplan rengini sarı yapar
 */
a:link {
     background-color: yellow
}
/*
 * Ziyaret edilmiş a nesnelerini seçip
 * arkaplan rengini mor yapar
 */
a:visited {
     background-color: purple
}

7) X + Y (Bitişik Seçici)

X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.
/*
 * ul nesnesinden hemen sonra gelen p nesnesini
 * seçer ve yazı rengini kırmızı yapar
 */
ul + p {
     color: red
}

8) X > Y (Çocuk Seçici)

X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.
/*
 * Sınıfı liste olan ul içinde bulunan
 * li çocuk nesnelerini seçip kenarlık ekler
 */
ul.liste > li {
     border: 1px solid #ddd
}

9) X ~ Y

X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.
/*
 * ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
 * seçer ve renklerini kırmızı yapar
 */
ul ~ p {
     color: red
}

10) X[Y] (Nitelik Seçici)

X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.

/*
 * a nesneleri içerisine title niteliği 
 * bulunanları seçip rengini kırmızı yapar
 */
a[title] {
     color: red
}

11) X[Y=’Z’]

X Nesnelerinde y niteliği z’ye eşit olan nesneleri seçmek için kullanılır.
/*
 * title niteliği test'e eşit olan linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[title='test'] {
    color: red
}

12) X[Y*=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır.

/*
 * title niteliğinde 'test' ifadesi geçen
 * linkleri seçip yazı rengini mavi yapar
 */
a[title*='test'] {
    color: darkblue
}

13) X[Y^=’Z’]

X Nesnelerinde Y niteliği Z ile başlayan nesneleri seçmek için kullanılır.
/*
 * href niteliği 'http' ile başlayan
 * linkleri seçip yazı rengini kırmızı yapar
 */
a[href^='http'] {
    color: red
}

14) X[Y$=’Z’]

X Nesnelerinde Y niteliği Z ile biten nesneleri seçmek için kullanılır.
/*
 * href niteliği '.net' ile biten linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[href$='.net'] {
    color: red
}

15) X[Y~=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır. X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi doğrudan bir ifade ise seçilir.. Yani “test” ifadesi geçen nesneleri seçeceksek “testettik” ifadesi içeren bir nesneyi bu seçici ile değil X[Y*=’Z’] seçicisi ile seçebiliriz.
/*
 * Title niteliğinde 'test' ifadesi geçen
 * linkleri seçip rengini kırmızı yapar
 */
a[title~='test'] {
    color: red
}

16) X:checked

X form nesnelerinde seçili olanları seçmek için kullanılır.
/*
 * tipi radio olan inputlarda seçili olandan sonra
 * gelen labeli seçip arkaplan rengini sarı yapar
 */
input[type=radio]:checked + label {  
   background-color: yellow
}

17) X::before ve X::after

Nesnenin öncesine ve sonrasına bir şeyler eklemek için kullanılır.

/*
 * Liste etiketlerinin öncesine
 * - ifadesini ekler
 */
ul li::before {
    content: '-'
}

/*
 * Liste etiketlerinin sonrasına
 * -son- ifadesini ekler
 */
ul li::after {
    content: ' -son- '
}

18) X:hover

Seçilen nesnenin üzerine fare geldiğinde işlem yapılması için kullanılır.
/*
 * Link nesnesinin üzerine fare ile
 * geldiğinde arkaplan rengini sarı yapar
 */
a:hover {
    background-color: yellow
}

19) X:not(Y)

:not seçicisi, değilse anlamına gelmektedir.. Yani bir div seçsin ama sınıfı test değilse gibi..

/*
 * Sınıfı erbilen olan ama id'si test olmayan
 * div nesnelerini seçer ve arkaplan rengini sarı yapar
 */
.erbilen:not(#test) {
    background-color: yellow
}

20) X::first-letter ve X::first-line

X nesnesinin ilk harfini seçip işlem yapmak için ::first-letter,
X nesnesinin ilk satırını seçip işlem yapmak için ::first-line kullanılır.
/*
 * div nesnesinin ilk harfinin
 * boyutunu 30px yapar
 */
div::first-letter {
    font-size: 30px
}

/*
 * div nesnesinin ilk satırının
 * arkaplan rengini sarı yapar
 */
div::first-line {
    background-color: yellow
}

21) X:nth-child(n)

X nesneleri içerisinde N.yi seçer.
/*
 * Li nesneleri içinde ikincisini
 * seçer ve regini kırmızı yapar
 */
ul li:nth-child(2) {
    color: red
}

22) X:nth-last-child(n)

X nesneleri içerisinde sondan N.yi seçer.

/*
 * Li nesneleri içinde sondan 1.yi
 * seçer ve regini mavi yapar
 */
ul li:nth-last-child(2) {
    color: blue
}

23) X:nth-of-type(n)

X nesnelerinde n.yi seçmek için kullanılır. :nth-child’dan farkını öğrenmek için videoya göz atın.
/*
 * Div içerisindeki 2. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-of-type(2){
    color: red
}

24) X:nth-last-of-type(n)

:nth-of-type ile aynıdır.. Tek farkı sondan başlayarak nesneleri seçmesidir..
/*
 * Div içerisindeki sondan 1. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-last-of-type(2){
    color: red
}

25) X:only-child

X nesnesi sadece bir tane olanları seçer.. Ancak onun dışında farklı bir nesne bile olmaması gerekir.. Yoksa seçmeyecektir.

/*
 * div içinde bir tane p etiketi (tek nesne) var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-child {
    background-color: yellow
}

26) X:only-of-type

:only-child seçicisinin aksine, X nesnesi sadece bir tane olan nesneleri seçer.. Farklı nesnelerin olması bu durumu etkilemez..
/*
 * div içinde bir tane p etiketi var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-of-type {
    background-color: yellow
}

27) X:first-child

İlk X nesnesini seçmek için kullanılır.
/*
 * İlk li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:first-child {
    color: red
}

28) X:last-child

Son X nesnesini seçmek için kullanılır.
/*
 * Son li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:last-child {
    color: red
}

29) X:first-of-type

İlk X nesnesini seçmek için kullanılır. :first-child seçicisinden farklı olarak, tipi eşleşen ilk nesneyi seçer.
/*
 * Divler içinde ilk p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:first-of-type {
    color: red
}

30) X:last-of-type

Son X nesnesini seçmek için kullanılır. :last-child seçicisinden farklı olarak, tipi eşleşen son nesneyi seçer.
/*
 * Divler içinde son p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:last-of-type {
    color: red
}

31) X:focus

Seçilen X nesnesine odaklandığında işlem yapmak için kullanılır.

/*
 * Input nesnesine odaklandığında
 * arkaplan regini sarı yapar
 */
input:focus {
    background-color: yellow
}

32) X:active

Aktif olan X nesnelerini seçmek için kullanılır.
/*
 * Linkle tıklandığında
 * arkaplan regini sarı yapar
 */
a:active {
    background-color: yellow
}

33) X:lang(Y)

X nesnelerinde lang niteliği Y ile başlayanları seçmek için kullanılır.
/*
 * p nesnelerinde lang niteliği tr ile başlayanları
 * seçer ve arkaplan rengini kırmızı yapar
 */
p:lang(tr) {
    background-color: red
}

34) :root

Bu seçici &lthtml> etiketi üzerinde işlem yapmamızı sağlar. Kısaca ana nesneyi seçmek için kullanılır.

/*
 * sayfanın arkaplan rengini
 * kırmızı yapar
 */
:root {
    background-color: red
}

35) X:empty

Hiçbir nesne ve karakter bulundurmayan X nesnelerini seçmek için kullanılır.
/*
 * İçerisinde hiçbir nesne, karakter olmayan
 * divleri seçer ve yükseklik vererek
 * arkplan rengini sarı yapar
 */
div:empty {
    height: 30px;
    background-color: yellow
}

36) X:target

Hedef olan X nesnelerini seçmek için kullanılır.
/*
 * id'si test olan div nesnesi hedeflendiğinde
 * arkplan rengini sarı renk yapar
 */
#test:target {
    background-color: yellow
}

37) X:enabled

X form nesnelerinde seçilebilir/yazılabilir olanları seçmek için kullanılır.
/*
 * input nesnelerinde seçilebilir olanların
 * sonrasında gelen labellere arkaplan uygular
 */
input:enabled + label {
    background-color: #eee
}

38) X:disabled

X form nesnelerinde pasif (işlem yapılamaz) olanları seçmek için kullanılır.
/*
 * Pasif olan input nesnelerinden sonra gelen label
 * nesnelerini seçer ve arkaplan rengini kırmızı yapar
 */
input:disabled + label {
    background-color: red
}

39) X:valid

X nesnelerinde istenilen formata uyan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)
/*
 * Geçerli formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:valid {
    background-color: green
}

40) X:invalid

X nesnelerinde istenilen formata uymayan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)
/*
 * Geçersiz formatta veri girilmiş
 * input nesnelerine işlem yapar
 */
input:invalid {
    background-color: red
}


41) ::selection

Seçilen ifadelerin (arkplan ve yazı renginde) değişiklik yapmak için kullanılır.
/*
 * p nesnelerinde seçilen yazıların
 * arkaplan rengini değiştirir
 */
p::selection {
    background-color: yellow
}
/* firefox için (-moz) ön eki gereklidir */
p::-moz-selection {
    background-color: yellow
}

CSS: Font Özellikleri

1) font-family

/*
 * h1 nesnesini seç ve
 * yazı tipini Arial yap
 */
h1 {
    font-family: Arial
}

2) font-size

/*
 * paragraf nesnesini seç ve
 * yazı boyutunu 25px olarak ayarla
 */
p {
    font-size: 25px
}

3) font-style

/*
 * paragraf nesnesini seç ve
 * yazıyı eğik yap
 */
p {
    font-style: oblique
}

4) font-variant

/*
 * paragraf nesnesini seç ve
 * küçük harfleri büyük yap
 */
p {
    font-variant: small-caps
}

5) font-weight

Yazı tipinin kalınlık ve incelik ayarlarını yapar. Aldığı standart değerlerin bazıları şunalrdır.
"normal, bold, bolder, lighter, 100, 200.."
/*
 * paragraf nesnesini içindeki spanı seç
 * ve yazısını kalınlaştır
 */
p span {
    font-weight: bold
}

/*
 * strong nesnesini seç ve
 * kalın olan yazıyı incelt.
 */
strong {
    font-weight: normal
}

6) font

Tüm font özelliklerinin tek seferde kullanılmasını sağlar.. Sırasıyla şöyle kullanılmalıdır;
font-style -> font-variant -> font-weight -> font-size / line-height -> font-family
Bu özelliğin kullanılması için her zaman font-size ve font-family özelliklerinin olması gerekir.
/*
 * paragraf nesnesini seç ve
 * eğik yap - harfleri büyüt - kalın yap
 * boyutunu 20px yap - satır yüksekliğini 25px yap
 * yazı tipini Arial yap
 */
p {
    font: oblique small-caps bold 20px/25px Arial
}